[gulp] 本番環境と開発環境を分岐するgulp-mode

こんにちは、ishidaです。
2年前に半年かけておとした体重が見事にもとに戻りました。
新陳代謝がきっとすげー落ちているんだよ。そうなんだよ。はい。

今回はnpmの紹介です。

gulp-mode

開発時と本番時で処理を変更したくなったことはありませんか？
このパッケージではgulpにて開発時と本番時のタスクを簡単に切り分けられます。

本番時

本番時にJSファイルをminifyしてみましょう。

var gulp = require('gulp');
var mode = require('gulp-mode')({
  modes: ["production", "development"],
  default: "development",
  verbose: false
});
var uglify = require('gulp-uglify');
 
gulp.task('default', function() {
  gulp.src('src/*.js')
      .pipe(mode.production(uglify()))
      .pipe(gulp.dest('dist'));
});

開発時

デフォルトが開発時です。
次に開発時にはCSSソースマップが出力するようにしてみます。

var gulp = require('gulp');
var mode = require('gulp-mode')({
  modes: ["production", "development"],
  default: "development",
  verbose: false
});
var sass  = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('default', function () {
  gulp.src('src/*.scss')
    .pipe(mode.development(sourcemaps.init()))
    .pipe(sass())
    .pipe(mode.development(sourcemaps.write('./')))
    .pipe(gulp.dest('dist'));
});

mode.development か mode.production を指定するだけなので
簡単に分けられますね。

本番時を実行したい時は

$ gulp --production

とコマンドを入力します。

開発時は

$ gulp

のままでOKです。

まとめ

gulp-modeは、開発時と本番時のタスクを簡単に切り分けられます。
開発時と本番時でのタスクをいろいろ変更する場合に便利です。
ぜひ試してみてください。

• gulp-mode