2016年なのでgulpfile.coffeeをgulpfile.jsに書きなおした。
1ファイルとかだとdecaf onlineでやり直してチョロチョロ書きなおすだけでよくて楽でした。
ところで最初に用意したのは1年前ぐらいだったのですが、バージョンが進んでいたりdeprecatedが発生していたりで、ライブラリの刷新が必要になりました。
Node.js 6ではナマでES2015が使える
というか、Node.jsぐらいならナマでいけるだろと適当に書きなおしていたら動かなくて、5を使っていたのに気づきました。
ので、「6では」などとあらためて書きました。
アロー記法は本当に良いですね。
ライブラリのバージョンをお手軽に更新する
これが便利で、以下でpackage.json内のライブラリのバージョンを最新に更新できます。
$ npm install -g npm-check-updates $ npm-check-updates -u
インストール自体は行われないので適宜やっていく感じになります。
更新されたファイルだけをコンパイルするにはgulp-watch
とにかく導入時は投入が再優先だったのであまり調べて使ってませんでした。
gulp.src('src/sass/**/*.sass')
gulp.watch以下でこの指定方法を使うと、更新されたファイル以外もコンパイルしてしまうので、watchのonChangeイベントから変更されたファイルを取得、そのパスをみて書きだし先にディレクトリ構造を再現するというシチ面倒くさいことを自分でやっていました。
gulp-watchを使えばそこらへんをよしなにしてくれます。
gulp.task('sass', () => { gulp .src(sassWatch) .pipe(watch(sassWatch)) .pipe(plumber()) .pipe(sass()) .pipe(gulp.dest(cssOut)); });
watch(sassWatch)がgulp-watch部で、これでwatchしてくれますのでgulp.watch部はいらなくなりました。
GulpでもいちおうWatchify
Watchifyはnpm runで使っていますが、いちおうGulpでの使いかたもさらいました。
ほぼコピペですが、ES2015対応にtransform: ['babelify']とその設定ファイル.babelrcを追加しました。
let watching = false;
gulp.task('enable-watch-mode', () => watching = true);
gulp.task('js', watchify((watchify) => {
gulp
.src(jsWatch)
.pipe(watch(jsWatch))
.pipe(watchify({
watch: watching,
transform: ['babelify']
}))
.pipe(gulp.dest(jsOut));
}));
おわり
Railsを使う時でもこの手のコンパイルはGulpでやっています。
Gemに依存するのがこわいというか、アセットパイプラインが好きじゃないとかそんな理由なんですが、一応RailsのGemでのやっていきかたも調べておいた方がいいかもしれない。