Gulp3で作っていた環境を、Gulp4に移行する必要が発生しました。
面倒だなと思いつつ、適当に暫定対応をしたらとりあえず動いたので、いったんは良しとしていました。
改めてきちんと対応をしようとソースを確認し、Gulp4に関する情報をググると gulp.task() が非推奨になっているではありませんか。
代わりに、関数宣言と exports が推奨であると。
早速タスクの書き換えに着手しましたが、どうしても上手く走ってくれない。
結論を言うと、タスク名がダメでした。
小一時間ハマったので、備忘録として残しておきます。
Gulp4でハマったタスク名
gulp.task() から推奨の通り function に書き換えました。
var sass = require('gulp-sass');
function sass() {
return gulp.src(['./stylesheets/**/*.scss', '!./stylesheets/_*/**/*.scss'])
.pipe(sass({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(changed('./tmp/css/'))
.pipe(gulp.dest('./tmp/css/'));
}
exports.sass = sass;実行すると、以下のエラーが表示されてしまいました。
Did you forget to signal async completion?ドキュメントに則って、コールバック関数を実行するように書き換えてみましたが、同じエラーが表示されます。
あの手この手と試した結果、タスク名を sass としていたことがNGだった模様です。
おそらく、名前の衝突をしていたのではないかと推察します。
オリジナルなタスク名に変更
そして最終的にタスク名の sass を sassCompile に変更しました。
var sass = require('gulp-sass');
function sassCompile() {
return gulp.src(['./stylesheets/**/*.scss', '!./stylesheets/_*/**/*.scss'])
.pipe(sass({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(changed('./tmp/css/'))
.pipe(gulp.dest('./tmp/css/'));
}
exports.sassCompile = sassCompile;これで、エラーなくタスクが完了しました。
さきほど表示されたエラーメッセージからは、まったく読み取れませんでした。
学び
Gulp3時代に書いたタスクは、参考にさせていただいたサイトに記載のコードをありがたく引用させていただきました。
有識者が書かれたコードは、汎用性を持たせるために、だいたいは汎用的な命名でされていることが多いです。
今回のケースで言えば sass がまさにそうで、その時点では良くても今後、汎用的な命名は予約語となってしまう可能性もあります。
実力もなく鵜呑みにしてしまう方が悪いのですが、こういったケースもありえるという学びでした。
…というか、分かっていても、書き換えるのがめんどくさいのでそのまま引用してしまうパターンが多い自分の癖を直した方が良さそうです。
海外のフォーラムでは my_task_name などにしているケースもあるので、こういった文化が日本でも根付けばいいなって思います。
コメント