gulpの開発環境と本番環境をminimistとgulp-ifで分ける

minimistとgulp-ifを使って、gulpの開発環境用のタスクと本番環境用のタスクを分けるというものをやってみました。

minimistはコマンドライン引数を使えるようにするもの。gulp-ifは条件分岐を使えるようにしてくれます。

例えば、Sassを使っている時、こんなことがコマンドの切り替えでできます。

開発時はSassを非圧縮でコンパイル
開発時はソースマップのコードも書き出し
本番環境時にCSSを圧縮
本番環境時はソースマップを書き出さない

こんな感じで開発時と本番用で快適にコーディングを進めることができます。

最初からCSSも圧縮しとけばいいじゃんと思うかもしれないですが、cssminとか使って圧縮するとソースマップのコードも消えちゃうんですよね…。あと以前はビルドタスク用意してその時に圧縮してたんですが、圧縮した後もやっぱ確認必要で、ビルドした後に確認っていうのも何か変だなと思ってました。

もろもろインストール

今回はsassで試してみます。開発時は非圧縮でコンパイルし、ソースマップも使う。本番用は圧縮して、ソースマップ使わないという感じです。

まずはもろもろインストールします。gulp,minimist,gulp-ifに加えて、ソースマップ用に「gulp-sourcemaps」、CSS圧縮に「gulp-cssmin」をインストールします。

npm i gulp gulp-sass minimist gulp-sourcemaps gulp-cssmin gulp-if -D

とりあえず最低限のインストール。

gulp

gulpfile.jsを作って以下を書きます。

var cssmin = require('gulp-cssmin');
var gulp = require('gulp');
var gulpIf = require('gulp-if');
var minimist = require('minimist');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var envSettings = {
  string: 'env',
  default: {
    env: process.env.NODE_ENV || 'development'
  }
}
var options = minimist(process.argv.slice(2), envSettings);
var production = options.env === 'production';
var config = {
  dirs: {
    src: './src'
  },
  sassOptions: {
    includePaths: ['node_modules/'],
    outputStyle: 'expanded'
  },
  envProduction: production
}
// sass
// =====================================================
gulp.task('sass', function() {
  return gulp.src(config.dirs.src + '/sass/!(_)*.{scss,sass}')
    .pipe(gulpIf(!config.envProduction, sourcemaps.init()))
    .pipe(sass(config.sassOptions))
    .pipe(gulpIf(!config.envProduction, sourcemaps.write()))
    .pipe(gulpIf(config.envProduction, cssmin()))
    .pipe(gulp.dest(config.dirs.src + '/css/'));
});

「-env production」が付いているかいないかで条件分岐させています。

参考にしたサイトです。こちらに詳しく書かれてます。

Gulp インストールから本番環境と開発環境の使い分けまで

Sass

簡単にSassでコードを書いてみます。

style.scss

@import "header";

_header.scss

header {
  background: #333;
  h1 {
    color: #fff;
  }
}

コマンドを打つ

まずは以下のコマンドを打ってみます。

gulp sass

するとstyle.cssは以下のように書き出されます。

header {
  background: #333;
}
header h1 {
  color: #fff;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlcyI6WyJzdHlsZS5zY3NzIiwiX2hlYWRlci5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCJoZWFkZXJcIjtcbiIsImhlYWRlciB7XG4gIGJhY2tncm91bmQ6ICMzMzM7XG4gIGgxIHtcbiAgICBjb2xvcjogI2ZmZjtcbiAgfVxufVxuIl0sIm1hcHBpbmdzIjoiQUNBQSxBQUFBLE1BQU0sQ0FBQztFQUNMLFVBQVUsRUFBRSxJQUFLO0NBSWxCOztBQUxELEFBRUUsTUFGSSxDQUVKLEVBQUUsQ0FBQztFQUNELEtBQUssRUFBRSxJQUFLO0NBQ2IiLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

非圧縮で、しっかりとソースマップも書き出されていますね。これでブラウザのデバッグツールで確認するのも楽々です。

次に以下のコマンドを打ってみます。

gulp sass --env production

するとstyle.cssは以下のように書き出されます。

header{background:#333}header h1{color:#fff}

圧縮されてソースマップもありません。

このように開発時と本番用で分けることができます。

npm run

最後にいちいち「-env production」が付いたコマンドを打つのはめんどいので、packege.jsonにタスクを書いておきます。

package.json

{
// 省略
  "scripts": {
    "dev": "gulp sass",
    "prod": "gulp sass --env production", 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
// 省略
}

こうすると「npm run dev」で開発時、「npm run prod」で本番用になります。

さいごに

今回はSassだけでしたが、他のタスクにも使うと便利です。

まだ途中ですがこれを取り入れてるものを作ってるので置いときます。

web-starter-kit