gulp.js による Web ページ作成のテンプレートを作る
2021/11/03
はじめに
LP などのペライチなページを作りたいときに Liveroad などしたいけど Webpack みたいに一つにして欲しくなかったので gulp.js
を使用してテンプレート化した。
数年前に少し使って最近は下火になったのかなと思ってたけどアップデートなどされているっぽい。v5 のロードマップなどもあるのでしばらくは大丈夫そう。
gulp.js の設定
gulp.js
は gulpfile.js
に記載された設定を実行することができる。
まずはインストール。
npm install --save-dev gulp
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask;
npx gulp
複数実行
複数の function を一つの処理名で実行することができるものが用意されている。series()
か parallel()
を使えと公式に書いてある。
series()
は処理を一つ一つ実行してくれるので前の処理を次の処理に使いたいときに使うのが良さそう。parallel()
は逆に並列に処理してくれるので同時に行って良いモノはこちらで良さそう。
const { series, parallel } = require("gulp");
function javascript(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
exports.series = series(javascript, css);
exports.parallel = parallel(javascript, css);
npx gulp series
npx gulp parallel
また入れ子にできるので以下のようなこともできる。
exports.build = series(hoge, parallel(fuga1, fuga2));
exports.build = parallel(hoge, series(fuga1, fuga2));
sass のトランスパイル
SASS
のトランスパイルには gulp-sass
というのもを使う。
npm install --save-dev gulp-sass sass
const { src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const buildSass = () => {
return src("src/common.scss")
.pipe(
sass({
outputStyle: "compressed",
})
)
.pipe(dest("dist/common.css"));
};
exports.build = buildSass;
また watch
を使うと指定したファイルの変更を監視して変更時に処理できるようになる。
const { src, watch, dest } = require("gulp");
const buildSass = () => {
...
};
const watchbuildSass = () => watch("src/common.scss", buildSass);
exports.build = buildSass;
js の minify 化と babel
js も同様に minify 化したり babel と通したりすることができる。
こちらも watch
を使って監視を入れる。
npm install --save-dev @babel/core @babel/preset-env gulp-babel gulp-renam gulp-uglify
const { src, watch, dest } = require("gulp");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const buildJs = () => {
return src(PATH.JS_PATH)
.pipe(babel())
.pipe(dest(PATH.JS_OUTPUT_PATH))
.pipe(uglify())
.pipe(rename({ extname: ".min.js" }))
.pipe(dest(PATH.JS_OUTPUT_PATH))F;
};
const watchJsFiles = () => watch(PATH.JS_PATH, buildJs);
ファイル移動
html
や画像などをビルド済みフォルダーに流したいので以下のように
const moveHTML = () => {
return src("src/*.html").pipe(dest("dist/"));
};
const watchHTML = () => watch(PATH.HTML_PATH, moveHTML);
サーバー化
上記の処理でビルドができるようになったがサーバーは別途建てないと確認ができないし Liveload ができないのでそこも gulp で対応する。
npm intall --save-dev gulp-connect
const webserverRun = () => {
return connect.server({
root: "dist",
livereload: true,
});
};
exports.default = parallel(watchJsFiles, webserverRun);
そして各々の処理にサーバーを更新する処理を記載する。
const moveHTML = () => {
return src("src/*.html").pipe(dest("dist/")).pipe(connect.reload());
};
const watchHTML = () => watch(PATH.HTML_PATH, moveHTML);
終わりに
今回のソースコードと実際の gulpfile.js
は以下のリポジトリにあります。
リポジトリ
gulpfile.js