#gulp(gulpfile.js)の直し方
むかしgulpで作ったプロジェクトを開いてみると…動かない！
もちろんnode.jsを古いのに戻せば解決します。ですが！
node.jsのバージョンを変えると、今度はvue.jsが動かないとか
現場で混乱するケースありえます。
（※みんながnodebrewとかnvmで作業しているかは分からないですし。）
なので、あえてgulp3→gulp4に上げてみました。
gulp4にあげたらgulpfile.jsの書き方変わってるので
いちから書き直しますが、gulp4はコールバックや明示的なリターン、がないと動きません。
###動作確認したNode.jsのバージョン
$ node -v
v12.16.1
####インストール
npm i gulp@4.0.2
####package.json
"scripts": {
"start": "gulp",
"build": "gulp build"
},
####まずgulp4の書き方を確認
gulp.task('hoge', () => {
console.log('debug:hoge');
return gulp.src('*');
});
gulp.task('fuga', () => {
console.log('debug:fuga');
return gulp.src('*');
});
gulp.task('piyo', () => {
console.log('debug:piyo');
return gulp.src('*');
});
gulp.task('foo', () => {
console.log('debug:foo');
return gulp.src('*');
});
gulp.task('bar', () => {
console.log('debug:bar');
return gulp.src('*');
});
gulp.task('baz', () => {
console.log('debug:baz');
return gulp.src('*');
});
gulp.task('default',
gulp.parallel('hoge', 'fuga', 'piyo', 'foo', 'bar', 'baz'));
gulp.task('build',
gulp.series('hoge', 'fuga', 'piyo', 'foo', 'bar', 'baz'));
これでちゃんとタスクが実行されているか確認します。
$ npm run start
> frontend-templates@1.0.0 start /Users/YourName/frontend
> gulp
[10:06:55] Using gulpfile ~/frontend/gulpfile.js
[10:06:55] Starting 'default'...
[10:06:55] Starting 'hoge'...
[10:06:55] Starting 'fuga'...
[10:06:55] Starting 'piyo'...
[10:06:55] Starting 'foo'...
[10:06:55] Starting 'bar'...
[10:06:55] Starting 'baz'...
debug:hoge
debug:fuga
debug:piyo
debug:foo
debug:bar
debug:baz
[10:06:55] Finished 'hoge' after 32 ms
[10:06:55] Finished 'fuga' after 32 ms
[10:06:55] Finished 'piyo' after 33 ms
[10:06:55] Finished 'bar' after 33 ms
[10:06:55] Finished 'foo' after 33 ms
[10:06:55] Finished 'baz' after 33 ms
[10:06:55] Finished 'default' after 35 ms
$ npm run build
> frontend-templates@1.0.0 build /Users/YourName/frontend
> gulp build
[10:07:37] Using gulpfile ~/frontend/gulpfile.js
[10:07:37] Starting 'build'...
[10:07:37] Starting 'hoge'...
debug:hoge
[10:07:37] Finished 'hoge' after 13 ms
[10:07:37] Starting 'fuga'...
debug:fuga
[10:07:37] Finished 'fuga' after 5.1 ms
[10:07:37] Starting 'piyo'...
debug:piyo
[10:07:37] Finished 'piyo' after 4.82 ms
[10:07:37] Starting 'foo'...
debug:foo
[10:07:37] Finished 'foo' after 4.62 ms
[10:07:37] Starting 'bar'...
debug:bar
[10:07:37] Finished 'bar' after 4.96 ms
[10:07:37] Starting 'baz'...
debug:baz
[10:07:37] Finished 'baz' after 5.37 ms
[10:07:37] Finished 'build' after 40 ms
一応これで動きました。
「明示的なリターン」は、式がシンプルな時には使えますが
式が複雑になってくると難しい気がするので、その場合はコールバックを使います。
gulp3で書いたタスクがあると思いますが、最後に「コールバック」をつけます。
cb();っていうのは(cb) => {の所に戻すだけなのでどんな名前でも良いです。
例えばowari();と(owari) => {でも良いですよ。
有名人はdone();と(done) => {で書いてます。
gulp.task('clean', () => {
del(['./dist']);
});
gulp.task('clean', (cb) => {
del(['./dist']);
cb();
});
また、シンプルなタスクで直接gulp.srcなどで始まってるものは、
cb()を入れる隙間がないですね。
これは{}を追加すると2つ以上の式が入ります。
//よくある昔の書き方
gulp.task('hoge', () => gulp.src(
.pipe()
.pipe()
.pipe()
//ココにcb()は書けない
));
gulp.task('hoge', (cb) => {
gulp.src(
.pipe()
.pipe()
.pipe()
);
cb();
})
####日本語の表示を出す。
やらなくて良い事ですが、デバッグついてに、
「なんかログがブワーって出るから、やっぱり黒い画面が怖い！」とか
言われないようにします。
[10:06:55] Starting 'default'...
[10:06:55] Finished 'default' after 35 ms
こんな感じのが、沢山でるんですが、正直別に常に見なくても良いです。
下記の設定をしておきます。
"scripts": {
"start": "gulp --silent",
"build": "gulp build --silent"
},
browserSync.init({
server: './public',
port: 3000,
logLevel: 'silent', //←これを追加
stats: {
builtAt: false,
children: false,
modules: false,
version: false,
},
と、とりあえずサイレントやその他の設定を付けておきます。
コールバックの手前に日本語でConsole.log()を足しておきます。
gulp.task('hoge', (cb) => {
gulp.src(
.pipe()
.pipe()
.pipe()
);
console.log('"ejs"を"html"に変換して"public"に置いています')//←ココ追加
cb();
})
$ npm run start
> frontend-templates@1.0.0 start /Users/YourName/frontend
> gulp --silent
"ejs"を"html"に変換して"public"に置いています
"scss"を"css"に変換して"public"に置いていま 。
"javascript"を変換して"public"に置いています。
"public"を"http://localhost:3000/"で見えるようにします。
もしサーバーを止めたい場合は、"Ctrl+C"キーを押して下さい
[12:54:09] Asset Size Chunks Chunk Names
common.js 4.85 KiB common [emitted] common
top.js 4.81 KiB top [emitted] top
Entrypoint common = common.js
Entrypoint top = top.js
$ npm run build
> frontend-templates@1.0.0 build /Users/YourName/frontend
> gulp build --silent
"dist"の中身を削除しています。
"public"の中身を"dist"にコピーしています。
"Javascript"を圧縮しています。
"css"を圧縮しています。
これで初心者の方に親切なgulpに仕上がりました。
……
まあ、今どき「gulp初心者」なんて居ないかもですけどね…