Posted at

Gulp Version4.0で環境構築してみた


概要




今回 趣味で 動きのあるサイトを作りたいなと思って JavaScriptを使用しようかなと思っていました。そしてタスクランナーを使用した方が色々と便利であるということを知り gulpを使ってみることにしました。gulp version4は2018年の12月11日にリリースされ version3と比べると変更点が少しあり まだまだアップデートされて日が浅いのでなかなか 記事がそこまで多いとは言えず 結構 苦労しました。お役に立てれば幸いです。 なお 初めて記事を投稿するのでお手柔らかにしていただけるとありがたいです笑


手順 ( 簡潔に )


今回はnpmのローカルインストールでいきたいと思います。


npm install --save -dev gulp 

npm install --save -dev browser-sync




--save -devは 上記でインストールした情報を package.jsonのdevDependenciesに記入してくれます。



ディレクトリー構成

image.png


babelの設定


{

"presets": ["es2015"]
}

ES2015のソースコードを使用するので それを自動コンパイルするために設定します。






gulpfile


gulpfile.babel.js

import gulp from "gulp";

import browserSync from "browser-sync";

gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: "./src/",
index: "Home.html"
}
});
});

gulp.task("bs-reload", function(done) {
browserSync.reload();
done(); -- タスクの終了を明記する
});

gulp.task("browser-sync", function() {
gulp.watch("./src/*.html", gulp.task("bs-reload"));
gulp.watch("./src/*.css", gulp.task("bs-reload"));
gulp.watch("./src/*.js", gulp.task("bs-reload"));
});

gulp.task("default", gulp.parallel("browserSync", "browser-sync"));



注意点は主に2つあります。




1つ目はbrowserSync.reload();した後にdone()という きちんとタスクをここで終了するということを明示してあげると良いかと思います。これをやらないと初めてファイルが変更された時にしかreloadされないといった現象が起こるようです。またfunction()にきちんとdoneを渡してあげてください。渡さないとReferenceErrorが出ます。

2つ目はversion4からgulp.watchの引数はgulp.taskやgulp.parallelといったものに変更になっているのでそのように書くと良いです。Version3のように記入するとReferenceErrorが出ます。



実行する時


cd プロジェクトの名前

npx gulp


こちらについては npx gulp のコマンドで実行するのが便利です。


参照記事

https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d

https://mae.chab.in/archives/2547

https://github.com/mochajs/mocha/issues/232

https://hyper-text.org/archives/2018/12/gulp-4-0-release.shtml

https://teratail.com/questions/168814