タスクランナー note


オールインワン 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 と同じ。