gulp.js による Web ページ作成のテンプレートを作る

2021/11/03

gulp

はじめに

LP などのペライチなページを作りたいときに Liveroad などしたいけど Webpack みたいに一つにして欲しくなかったので gulp.js を使用してテンプレート化した。 数年前に少し使って最近は下火になったのかなと思ってたけどアップデートなどされているっぽい。v5 のロードマップなどもあるのでしばらくは大丈夫そう。

gulp.js の設定

gulp.jsgulpfile.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