pugでコーディングしたものとscss で記述したものをまとめてビルドするツールがあります。

gulp（ガルプ）です。

packagejsonと何が違うのかいまいち分かってなかったので、把握できたっことを書いておきます。

gulp導入手順①gulpのインストール

いくつかのサイトの情報を見て実行したものの、うまくいきませんでした。

npm install -g gulpだけではなく、npm install –save-dev gulpと２つのinstallが必要だったのかもしません。

$ npm install -g gulp

$ npm install --save-dev gulp

下記のコマンドが動作すればOK。

//実行するコマンド
$ gulp -v

//結果が出たらOK
[03:21:39] CLI version 3.8.7
[03:21:39] Local version 3.8.7

var gulp = require('gulp');

gulp.task('hello', function(done) {
  console.log('Hello gulp!');
  done();
});
gulp.task('default', gulp.series(gulp.parallel('hello')));

このコードは先述の参考サイトを参照しましたが、gulpのバージョンが3から4へ変更されたため、書き方も変更しました。

v3ではgulp.task(‘hello’, function()だったところを、gulp.task(‘hello’, function(done)とし、consolelogを表示したらdone()で締めています。これがないと「Did you forget to signal async completion?（非同期完了のシグナルを忘れていませんか？）」と優しく嗜められます。エラー文先輩…///

また、v3ではgulp.task(‘default’, [‘hello’]);で済んでいた記述も、gulp.task(‘default’, gulp.series(gulp.parallel(‘hello’)));に変更しました。バージョンアップして長文になるの意味わかんない。

gulp.jsがかけたら、コマンドのgulpで実行します。

[11:20:05] Using gulpfile ~/****/各プログラム名/gulpfile.js
[11:20:05] Starting 'default'...
[11:20:05] Starting 'hello'...
Hello gulp!
[11:20:05] Finished 'hello' after 428 μs
[11:20:05] Finished 'default' after 1.55 ms

console.logの中身が表示され、実行結果も良好です。

gulp導入手順③パッケージを追加インストールする

gulpで動かしたい内容のパッケージをインストールしていきます。

npm install gulp-dart-sass --save-dev

sudo npm install gulp-plumber --save-dev //エラーが出たのでsudoをつけた PCのPASSを聞かれます

npm install gulp-autoprefixer

npm install gulp-pug

gulp導入手順④gulpfile.jsを書き換える

gulp導入手順②で書いた初期の内容を削除して、下記の通りに書き直します。

const gulp = require('gulp');//gulp本体
const sass = require('gulp-dart-sass');//gulpでsassを使用する
const plumber = require('gulp-plumber');//途中でエラーが起こってもとりあえず最後まで実行させる
const autoprefixer = require('gulp-autoprefixer');//ベンダープレフィックスをつける
const pug = require('gulp-pug');//gulpでpugを使用する

//sassの仕事 
gulp.task("sass", function(done) {
    gulp.src("sass/**/*.scss")　//gulpfileと同じ階層のsassフォルダの.pugファイルを対象にするよ
        .pipe(plumber())　//エラー出ても実行止めないでね
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest("www/css")); //gulpfileと同じ階層のwwwフォルダの中にあるcssフォルダに入れるよ
        done(); //この作業おしまい
    });
    
    //pugの仕事
    gulp.task("pug", function(done) {
        gulp.src("pug/**/*.pug")　//gulpfileと同じ階層のpugフォルダの.pugファイルを対象にするよ
        .pipe(plumber())　//エラー出ても実行止めないでね
        .pipe(pug({pretty: true})) //改行とインデントのオプション込みでうまくやったって
        .pipe(gulp.dest("www")); //gulpfileと同じ階層のwwwフォルダに入れるよ
        done(); //この作業おしまい
});

//task実行
gulp.task('default', gulp.series(gulp.parallel('sass', 'pug')));

書き方はたくさんあると思います。でもこれで問題なさそうなので、コマンドgulpを実行。

あらかじめ作っておいたwwwフォルダの中にindex.htmlとcssフォルダができていれば完了です。

うまくいかない時は、gulp.src(“”)のパスを適宜見直すといいかもしれません。

あと個人的にはベンダープレフィックスは無くなる方針でいいと思っています。今回はお守りがわりにつけました。

これから開発に向けてどんどん機能追加していく予定です。画像の自動圧縮機能も追加したら後日追記します。

関連記事

lottieを使ってみる microCMSのAPIに手こずった話 【第一回】素敵なjsアニメーションを読む Typescriptにおけるvoid型とnever型