【node.js】Gulp.js+Sass+PugでWEB制作を自動化する

Web制作では様々な仕事があり、毎回やるのが面倒だから自動化できるところは自動化して楽しちゃいましょうっていう話。

ざっくり説明すると下記3つを使う。

Gulp.js（タスクランナー）

・Sass→CSS変換
・CSS,JS,画像圧縮
などをJSで作成して自動化させる。

Sass

CSS機能の拡張Ver.
コード量が減り、保守メンテナンス性が高まる。

Pug

HTMLを書くためのJSテンプレートエンジン。
記述が簡単になる。
特徴として、
・閉じタグがない
・インデントで階層表現
・変数、if文などかける
・別ファイルインクルード可能

利用手順

※node.jsはインストール済みの前提

1.作業ディレクトリ作成　
mkdir src

2.package.json作成
npm init -y

3.gulp.jsインストール
npm install -D gulp

※ちなみに-Dはローカルインストールになる。
グローバルインストールだとマシン全体にインストール。
同じマシンで様々なプロジェクトを管理するならローカルが推奨されているぽい。
理由は1年前にインストールしたものはローカルの場合その状態のまま動き、
これから作るプロジェクトなら最新版がローカルで動き・・・となるかららしい。

4.必要モジュールインストール
package.jsonに記載のものを一括でロードも可能だが、今回は初ということで一つづつ入れて見る。

エラー通知
npm install gulp-notify --save-dev

エラーでも監視継続
npm install gulp-plumber --save-dev

SassをCSSコンパイル
npm install gulp-sass --save-dev

ベンダープレフィックス付与
npm install gulp-autoprefixer --save-dev

JS圧縮
npm install gulp-uglify --save-dev

PugをHTML変換
npm install gulp-pug --save-dev

※--save-devで、package.jsonに記載してくれる。

5.gulpfile.jsを作り、必要なタスクを記載する
参考：https://mae.chab.in/archives/2545

// gulpプラグインの読み込み
var gulp = require('gulp');
var notify = require("gulp-notify"); // エラー時の通知
var plumber = require('gulp-plumber'); // エラーでもファイル監視(watch)を続ける
var sass = require("gulp-sass"); //SassをCSSに
var autoprefixer = require("gulp-autoprefixer"); //Sassにベンダープレフィックスをつける
var uglify = require('gulp-uglify'); //JSの圧縮
var plumber = require("gulp-plumber"); //エラーハンドリング
var pug = require('gulp-pug');

//scssにベンダープレフィックスをつけて圧縮してコンパイル
gulp.task('scss', function() {
    gulp.src('./scss/**/*.scss')
        .pipe(plumber())
        .pipe(autoprefixer({ // ベンダープレフィックスの付与
            browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定
            cascade: false // 整形しない
        }))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(gulp.dest('./css')); // cssディレクトリに書き出す
});

//jsを圧縮
gulp.task('js', function() {
    //実行するファイル
    gulp.src('./js/**/*.js')
        //pipeでつなぐ
        .pipe(plumber())//エラーハンドリング
        .pipe(uglify())// 圧縮
        .pipe(gulp.dest('./js/min'));//圧縮したファイルを出力
});

//Pug
gulp.task('pug', () => {
    return gulp.src('./pug/**/*.pug')
        .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('./'));
});



// 自動監視化
gulp.task('watch', function(){
    gulp.watch('./scss/**/*.scss', ['scss']);
    gulp.watch('./js/**/*.js', ['js']);
    gulp.watch('./pug/**/*.pug', ['pug']);
});

gulp.task('default', ['watch']);

実装内容

・/scss内のファイルを変更→/css内に同名のCSSを自動生成
・/js内のファイルを変更→/js/min内に同名のJSを自動生成
・/pug内のファイルを変更→/内に同名のHTMLを自動生成

実行

npx gulp

普通にgulpだと上述したとおりローカルインストールだとパスが通っていなくて、まるでインストールできていないようにみえるが、npxコマンドだと行けるようになる。

npxはnpmに付属して勝手に入ってるので使えるはずだが、もし使わない場合は下記のようにパスで指定して起動しても一応同じことになる。長いのでやらないけど。
./node_modules/.bin/gulp

SCSS書き方参考
【初心者向け】Sassをいい感じに活用する - Qiita

Pug書き方参考
覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方 ｜ Tips Note by TAM