タスクランナー note
6956 ワード
オールインワン ES6 x CommonJS -> concat x minify(map付き)✨
例:
var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var uglify = require("gulp-uglify");
var sourcemaps = require("gulp-sourcemaps");
var minimist = require('minimist'); // 引数を使うための
var SITE_ID = minimist(process.argv.slice(2)).f; // 第一引数 `gulp [taskName] -f param1Value`
gulp.task("compile", function() {
browserify({
entries: `./src/${SITE_ID}.js` // ビルド対象のファイル
// debug: true // trueにすると、//# sourceMappingURL=data:application/json;charset:utf-8;base64,~でsourcemapが出力される
})
.transform("babelify", {presets: ["env", "react"]})
.bundle()
.pipe(source("out.min.js")) // ビルド後のファイル名
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true})) // sourcemap作成
.pipe(uglify()) // minify
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("./")); // 生成先の指定
});
gulp.task("default", ["compile"]);
参考: http://d.hatena.ne.jp/Kazuhira/20150921/1442822827
本当はこうしたかった:
- 直接コマンドで叩けばuglifyでもgoogle-closure-compilerでも上手く動作する
- が、nodeでファイル内に書かれた
require('child_process').exec
から実行すると、どう頑張っても、1KBのファイルが出力される。(怒) - 結論、素直にgulpを使った。
ES6
ES6のクラスはプロパティをメソッド外で定義できません(JavaやC++みたいに)。
それを出来るようにしてくれるやつ
ビルドシステム(タスクランナー?)
- Rollup
- Webpack
- Browserify
requireを解決したり、es6->es5にしてくれるやつ
- buble
- babel
- rollup
パッケージインストーラー
- yarn
- gulp
- npm
yarn
-
$ yarn build
は$ npm run build
と同じ。
Author And Source
この問題について(タスクランナー note), 我々は、より多くの情報をここで見つけました https://qiita.com/howling_wolf/items/a906fae3c47e9aef49ec著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .