gulpfile.jsを書き直した。

Gulp覚えたての頃に色んなサイトからツギハギで作っていたgulpfile.jsですが、自分の制作のテンプレートをちゃんと作っておこうと思ったのを機会に1から再構築しました。 これは使わないなーと思ったものを断捨離したり、処理が無駄そうに思えたところを削ってみたりしていますので、備忘録として残しておきます*1。

これが有用そうな人

• フロントエンドでスタティックなWebを作る人
• 趣味でWebやっててnode.jsやGulp触った事ないから、とりあえずどんなもんか見てみたい人

かなと思います。

パッケージ一覧。

  "devDependencies": {
    "autoprefixer": "^8.0.0",
    "browser-sync": "^2.23.6",
    "css-mqpacker": "^6.0.2",
    "gulp": "^3.9.1",
    "gulp-csscomb": "^3.0.8",
    "gulp-ejs": "^3.1.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0"
  }

とりあえずこれだけ。バージョンとかはあまり調べていないので全て現行版。ものによっては古いもののほうが良いとかもあるかも。

gulpfile.js

var gulp    = require('gulp');
var $ = require('gulp-load-plugins')({
  pattern: [
    'gulp-*',
    'autoprefixer',
    'css-mqpacker'
  ]
});

var browser = require('browser-sync').create();

// ディレクトリ
var dir = {
  src  : 'src/',
  dist : 'dist/'
}

// 開発用サーバをローカルに立ち上げる
gulp.task('server', function() {
  browser.init({
    server: {baseDir: dir.dist}
  });
});

// ejsコンパイル
gulp.task("ejs", function() {
  return gulp.src([dir.src + 'ejs/**/*.ejs','!' + dir.src + '/ejs/**/_*.ejs'])
  // 書式エラーがあっても動作停止しない
  .pipe($.plumber({
    errorHandler: $.notify.onError("Error: <%= error.message %>")
  }))
  // 拡張子をhtmlにする
  .pipe($.ejs({}, {}, {"ext": ".html"}))
  // 出力先ディレクトリ
  .pipe(gulp.dest(dir.dist))
  // ブラウザを更新する
  .pipe(browser.stream());
});

// sassコンパイル
gulp.task("sass", function() {
  var plugins = [
    // ベンダープレフィックス付与 対象： http://browserl.ist/?q=last+2+versions%2C+ie+%3E%3D+8%2C+iOS+%3E%3D+9
    $.autoprefixer({browsers: 'last 2 versions, ie >= 7, iOS >= 9'}),
    // メディアクエリの整理
    $.cssMqpacker({sort: true})
  ];
  return gulp.src([dir.src + 'scss/**/*.scss'])
  // 書式エラーがあっても動作停止しない
  .pipe($.plumber({
      errorHandler: $.notify.onError("Error: <%= error.message %>")
  }))
  // sourcemapを出力するようにする
  .pipe($.sourcemaps.init())
  // sassコンパイル、方式指定
  // expanded   : 展開
  // compressed : 圧縮
  .pipe($.sass({outputStyle: 'expanded'}))
  // css整形
  .pipe($.postcss(plugins))
  .pipe($.csscomb())
  // sourcemap出力先
  // css出力先からの相対パスで書く
  .pipe($.sourcemaps.write('../maps'))
  // 出力先ディレクトリ
  .pipe(gulp.dest(dir.dist+'css'))
  // ブラウザを更新する
  .pipe(browser.stream());
});

// js圧縮
gulp.task("js", function() {
  return gulp.src([dir.src + '/js/**/*.js','!' + dir.src + 'js/lib/*.js'])
  // 圧縮するならコメントアウト解除
  //.pipe($.uglify())
  //.pipe($.rename({extname: '.min.js'}))
  .pipe(gulp.dest(dir.dist+'js'))
  // ブラウザを更新する
  .pipe(browser.stream());
});

// 画像圧縮
gulp.task('images', function(){
  return gulp.src([
    dir.src + 'images/**/*'
  ])
  // 画像圧縮処理
  .pipe($.imagemin())
  // 出力先ディレクトリ
  .pipe(gulp.dest(dir.dist + 'images/'))
  // ブラウザを更新する
  .pipe(browser.stream());
});

// コピー（配置するだけのリソース用）
gulp.task('copy', function(){
  return gulp.src([
    dir.src + 'resource/**/*',
    dir.src + 'resource/.htaccess'
  ], {
    // コピー元ディレクトリ
    // このディレクトリを起点としてdistへコピーする
    base: dir.src + 'resource'
  })
  // 出力先ディレクトリ
  .pipe(gulp.dest(dir.dist))
  // ブラウザを更新する
  .pipe(browser.stream());
});

// ファイル変更監視
gulp.task('watch', function() {
  gulp.watch([dir.src + 'ejs/**/*'], ['ejs']);
  gulp.watch([dir.src + 'scss/**/*'], ['sass']);
  gulp.watch([dir.src + 'js/**/*'], ['js']);
  gulp.watch([dir.src + 'images/**/*'], ['images']);
  gulp.watch([dir.src + 'resource/**/*'], ['copy']);
});

// 標準タスク
gulp.task('default', ['server', 'watch']);

後で絶対自分でわからなくなるからと思って結構コメントを書いちゃってます。

タスクの補足。

とりあえず見てわかるものとか、どうでもいいことは割愛。

gulp-load-plugins

とにかくgulpfile.jsの頭にパッケージ入れる度にvar hoge = require('hoge-fuga');と書かずに済むように。私は$を使いましたが、これは別に何でも好きなものにすれば良いと思います。

var dir

そうそう変えることもないとは思うんですが、ソースディレクトリと出力先ディレクトリを変数化しておくことで、変更があった際にここだけ書き換えれば済むように。

sass

csscomb*2で整形してます。gulp-pleeease使うことも考えたけど、これを書いている時点で2年くらい更新されていなかったので今後どうなるかわからないということもあり、postcss+autoprefixer+css-mqpacker+csscombにしました。csscombは単純に自分の好みで作ったのでここでは取り上げませんが、本家で対話形式でコンフィグファイルが作れるのでそれを使うのが簡単かつわかりやすいかと思います。 エディタ側に依存しないでgulp側で整形するようにしたのは、環境によって設定が違うためにブレが出るといったことがないようにするため。

CSScomb: Makes your code beautiful

画像圧縮

一括でやってますが、png、jpg、svgは個別にやったほうがいいみたい？

*2018/7/12 0:25 追記 仕様を理解していなかったようなので、こちらで書きました。 alice37.hatenablog.com

コピータスク

何のためにあるのかというと、将来的にdistディレクトリを本番環境用にリビルド出来るようにしたいため、htaccessとかjsのプラグインとかをgulpの変換噛まさないでsrcディレクトリで管理しておきたかったので。

※2/25 15:10 追記 htaccessがファイル対象にマッチしていなかったので、若干修正。

stream処理

前はdistディレクトリを監視してて更新があったら何が何でもリロード！ってしてましたが、sassとかはstreamで処理したほうがブラウザのリロードを介さないで反映出来るみたい。たまに適用されているスタイル見るときにsourcemapsの反映が遅いのか、ズレることがあるのでどうするか考え中。 何でもかんでもリロード時と比べると、「何かは知らんが変更されたからリロードするやで」じゃなくて「何が変更されたか」がターミナルに出るようになったので、個人的にはこちらのほうが気に入っています。（on changeでのリロードでもファイル通知出来るのかな？）

TODO

• 開発時とリリース時で挙動を分ける
• json扱えるようにする
• gulp-connect-php
• mixinとか色々作っておく？

*1:Qiitaに投稿する勇気はなかった

*2:死ぬほどどうでもいいけど、combはコンブではなくコーム（櫛）。