[Gulp × Sass × EJS]私が使っているgulpfile.jsの中身を公開します（2018年8月版）

コーディングをする時にGulpを使っていますか？

先日、私の地元・福岡で行われた「サト研」というWeb制作者向けの勉強会で、コーディングに特化した集まりがあったので出席してきました。
私が参加したグループの中ではデザイナーさんとコーダーさんの人数がだいたい半々くらいの感じだったのですが、その中で「Gulp使ってます？？」という質問が出ており、その時の参加者の回答の感じでは実際にGulpを使っているコーダーさんの割合も半分くらいかなぁという印象でした。

かくいう私もGulpを導入してまだ１年くらい。受託でお仕事をする中、発注元の制作会社さんがGulpとEJSを使ってコーディングしていたので、「これは便利そう」とまずは検索してGulpについて学んでから、発注元で使われていたgulpfile.jsを参考に、見よう見まねで始めてみたのがきっかけです。

それまではSassのコンパイルにはCodekitを使っていて、「静的サイトを作るときもPHPやRubyを使ったテンプレートエンジンやWordPressのようなCMSみたいにヘッダーやフッターを共通パーツで使い回せたら便利なのになぁ」と思っていたので、Gulpで使うEJSはまさに打ってつけな存在！
Dreamweaverにはテンプレート機能があるけどDreamweaver自体ほとんど使っていないし、そもそもCoda2→SublimeText2→atom→VisualStudioCode（今ココ）と渡り歩いてきたので、テキストエディタに依存するテンプレート機能には頼りたくないというのが正直な話でした。

それからGulpとEJSに関する記事をEvernoteに保存しては読み返すことを繰り返し、今では自分のワークフローからGulpは手放せないものになってしまいました。（とか言いながら、あと数年したらもっと良いものが出てきて乗り換えてるのかもしれません。。。Web業界の時代の移り変わりは早い！）

現状で私がGulpを十分に理解し使いこなしていると言えるかどうかといえば自信を持って「YES」と言えるわけでもないのですが、現在自分が使っているgulpfile.jsの中身を公開します。

gulpfile.jsはこんな感じです。
追記：このコードはGulp3の時代に書いたものなので、それ以降のバージョンではうまく動作しません。ご了承ください。

var gulp = require("gulp"),
    ejs = require("gulp-ejs"),
    fs = require('fs'),
    sass = require("gulp-sass"),
    autoprefixer = require('gulp-autoprefixer'),
    mmq = require('gulp-merge-media-queries'),
    browser = require("browser-sync"),
    plumber = require('gulp-plumber'),
    rename = require("gulp-rename"),
    notify  = require('gulp-notify'),
    changed  = require('gulp-changed'),
    imagemin = require('gulp-imagemin'),
    imageminJpg = require('imagemin-jpeg-recompress'),
    imageminPng = require('imagemin-pngquant'),
    imageminGif = require('imagemin-gifsicle'),
    svgmin = require('gulp-svgmin');

var DEV = "dev",
    PUBLIC = "public";

//ejs
gulp.task("ejs", function() {
    var json = JSON.parse(fs.readFileSync(DEV + '/ejs/templates/data.json'));
    gulp.src([DEV + "/ejs/**/*.ejs",'!' + DEV + "/ejs/**/_*.ejs"])
    .pipe(ejs({json:json}))
    .pipe(rename({
      extname: ".html"
    }))
    .pipe(gulp.dest(PUBLIC))
    .pipe(browser.reload({stream:true}));
});

//style
gulp.task("style", function() {
    gulp.src(DEV + "/sass/**/*.scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({
            style:"expanded",
            compass : false,
            "sourcemap=none": true,
        }))
        .pipe(autoprefixer({browsers: ['last 3 versions','ie >=11','android >=4.4']}))
        .pipe(mmq({
            log: false
          }))
        .pipe(gulp.dest(PUBLIC + "/css"))
        .pipe(browser.reload({stream:true}));
});

gulp.task('imagemin', function(){
    var srcGlob = DEV + '/images/**/*.+(jpg|jpeg|png|gif)';
    var dstGlob = PUBLIC + '/images';
    gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(imagemin([
        imageminPng(),
        imageminJpg(),
        imageminGif({
            interlaced: false,
            optimizationLevel: 3,
            colors:180
        })
    ]
    ))
    .pipe(gulp.dest( dstGlob ));
});

gulp.task('svgmin', function(){
    var srcGlob = DEV + '/images/**/*.+(svg)';
    var dstGlob = PUBLIC + '/images';
    gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(svgmin())
    .pipe(gulp.dest( dstGlob ));
});

//copy
gulp.task("js", function() {
    return gulp.src(DEV + "/js/**/*.js")
        .pipe(gulp.dest(PUBLIC + "/js"));
});

//fonts
gulp.task("fonts", function() {
    return gulp.src(DEV + "/fonts/**/*")
        .pipe(gulp.dest(PUBLIC + "/fonts"));
});

//browser sync
gulp.task("server", function() {
    browser({
        server: {
            baseDir: PUBLIC
        },
        port: 4000
    });
});

//watch
gulp.task("default",["ejs","style","js","imagemin","svgmin","fonts","server"], function() {
    gulp.watch(DEV + "/ejs/**/*.ejs",["ejs"]);
    gulp.watch(DEV + "/sass/**/*.scss",{cwd: './'},["style"]);
    gulp.watch(DEV + "js/**/*.js",["js"]);
    gulp.watch(DEV + "images/**/*",['imagemin','svgmin']);
    gulp.watch(DEV + "fonts/**/*",["fonts"]);
});

requireで呼び出しているものは下記のとおり。

gulp-ejs

gulpでEJSを使えるようにする

fs

node.jsのファイルシステムを操作するコアモジュール（EJSの中でJSONを使えるようにパースするため）

gulp-sass

gulpでSassを使えるようにする

gulp-autoprefixer

自動的にベンダープレフィックスを付与

gulp-merge-media-queries

散らかったメディアクエリの記述をまとめる

browser-sync

ブラウザの自動リロード

gulp-plumber

コンパイル時にエラーが起きてもgulpを走らせたままにしておく

gulp-rename

ファイル名を変更（拡張子を.ejsから.htmlにするため）

gulp-notify

エラーが起きた時にデスクトップ画面に通知を出す

gulp-changed

変更が生じたファイルを処理

gulp-imagemin

画像ファイルを圧縮

imagemin-jpeg-recompress

jpegファイルを圧縮<

imagemin-pngquant

pngファイルを圧縮

imagemin-gifsicle

gifファイルを圧縮

gulp-svgmin

svgファイルを圧縮

上記はEJSを使ったバージョンです。WordPressでテーマを作るとき用のgulpfile.jsも別に作っているので、そのうちそちらも公開するかもです。
まだまだおかしいところがあるかもしれないですが、新しい知識も蓄えながら、これからもブラッシュアップを続けていきます。