タスクランナー note #JavaScript

オールインワン 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++みたいに）。
それを出来るようにしてくれるやつ

https://marunouchi-tech.i-studio.co.jp/2665/

ビルドシステム（タスクランナー？）

Rollup
Webpack
Browserify

requireを解決したり、es6->es5にしてくれるやつ

buble
babel
rollup

パッケージインストーラー

yarn
gulp
npm

yarn

$ yarn build は $ npm run build と同じ。