gulpでsassとpug動かしたら便利だった

pugのインストール
gulpのインストール

pugのインストール

pugという名前は聞いたことがあったのですが、使っていませんでした。
sassはコンパイルしてcssを書き出すものですが、pugはコンパイルしてhtmlを書き出すもの。
Emmetを利用していたので、すでにhtmlの書き出しに関しては便利になったんですが、pugはヘッダーやフッターなどの共通部分をインクルードすることができるので、大規模サイト構築の場合に便利です。

環境設定が大変なのかなと思いましたが、下記URLを参照してインストールしたら一瞬でインストール完了しました。

【Pug】ゴリラでもわかるJade改めPug入門

HTMLを書くためのテンプレートエンジン、pugの使い方をまとめてみました。

▲ 目次に戻る

gulpのインストール

今回は、一緒にgulpも使うことにしました。
gulpも便利ということは耳にしていたのですが、設定が面倒そうだったので利用していませんでした。

下記サイトを参考にインストールしました。
絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順

インストールとコンパイルまではできたのですが、Watchがうまく動かなかったので他のサイトを参考。

gulp+pug+scss+autoprefixerのコンパイルが突然できなくなったので、gulp4に移行した話
gulp4だとgulp3と書き方が違うみたいです。

基本的にはこれで動いたのですが、PC用とSP用で分けてhtmlやcssを書く時のために下記のようにgulpfile.jsを作成しました。

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var notify = require("gulp-notify");
var pug = require("gulp-pug");
var autoprefixer = require('gulp-autoprefixer');
 
//sassをcssに変換してautoprefixer
gulp.task('sass', function(done) {
    gulp.src("./build/scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer({browsers: ["last 3 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"]}))
        .pipe(gulp.dest("./build/css"))
    done();
});
 
gulp.task('sasssp', function(done) {
    gulp.src("./build/sp/scss/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer({browsers: ["last 3 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"]}))
        .pipe(gulp.dest("./build/sp/css"))
    done();
});
 
//pugをhtmlに変換
gulp.task('pug', function(done) {
    var option = {
        pretty: true
    }
    gulp.src(['./build/pug/*.pug', '!./build/pug/_*.pug'])
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(pug(option))
        .pipe(gulp.dest("./build/"))
    done();
});
 
//pugをhtmlに変換
gulp.task('pugsp', function(done) {
    var option = {
        pretty: true
    }
    gulp.src(['./build/sp/pug/*.pug', '!./build/sp/pug/_*.pug'])
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(pug(option))
        .pipe(gulp.dest("./build/sp/"))
    done();
});
 
gulp.task('default', gulp.series('sass', 'pug', 'sasssp', 'pugsp')); // taskの名前はdefaultにしましたが、何でも大丈夫
 
//sassとpugの監視をして変換処理させる
gulp.watch(['./build/scss/**'], gulp.task('sass'));
gulp.watch(['./build/sp/scss/**'], gulp.task('sasssp'));
gulp.watch(['./build/pug/**'], gulp.task('pug'));
gulp.watch(['./build/sp/pug/**'], gulp.task('pugsp'));

これで便利になりましたが、慣れるまで少々時間がかかりそうです。

▲ 目次に戻る