Использование Gulp. Часть 3 - разные сборки для development и production.

Очень часто бывает ситуация, когда сборка проекта для разработки отличается от сборки проекта для продакшн. Самый распространенный пример: в разработке мне не нужны минифицированные файлы, а в продакшн я хочу выпускать именно min-версии файлов.

Чтобы запускать gulp в режиме продакшн без дополнителльных плагинов, в коммандной консоли надо набрать (для Windows):

set NODE_ENV="production" && gulp

Но это не удобно. Было бы намного проще писать, например:
gulp -prod

Есть несколько вариантов. Мы рассмотрим 2 наиболее распространенных.
В обоих вариантах мы будем использовать плагин gulp-if 
https://www.npmjs.com/package/gulp-if
Установим его:
npm install gulp-if

Вариант1.
Установим плагин yargs.
https://www.npmjs.com/package/yargs

npm install yargs

Подключим плагины в gulpfile.js

var gulpif = require('gulp-if');
var argv = require('yargs').argv;

Обратите внимание, что yards подключается со своим аргументом .argv.
Теперь ниже в коде вместо 
.pipe(cleanCSS())
запишем

.pipe(plugins.if(argv.prod, plugins.cleanCSS()))

Запускаем gulp - main.css обычный;
Соочетание клавиш Ctrl + С, жмем y, затем Enter.
Запускаем команду gulp --prod и видим, что main.css теперь минифицированный.

Весь код в файле gilpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'),
    gulpif = require('gulp-if'),
    argv = require('yargs').argv;

var config = {
    srcDir: './src',
    sassPattern: 'sass/**/*.scss'
};

gulp.task('sass', function () {
    return gulp.src([config.srcDir+'/sass/libs.scss', config.srcDir+'/sass/style.scss', config.srcDir+'/sass/responsive.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('main.css'))
    .pipe(gulpif(argv.prod, cleanCSS()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/css'));
});

gulp.task('watch', function () {
    gulp.watch(config.srcDir+'/'+config.sassPattern, ['sass'])
});

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

Вариант 2.
Плагин gulp-util
https://github.com/gulpjs/gulp-util

Устанавливаем:
npm install gulp-util --save-dev

В gulpfile.js добавляем require:
var gutil = require('gulp-util');

Теперь вместо .pipe(cleanCSS()) запишем:

.pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())

Момент истины:
Запускаем gulp - main.css обычный;
запускаем gulp --type production - main.css минифицированный.
Весь код для второго варианта:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'),
    gulpif = require('gulp-if'),
    gutil = require('gulp-util');

var config = {
    srcDir: './src',
    sassPattern: 'sass/**/*.scss'
};

gulp.task('sass', function () {
    return gulp.src([config.srcDir+'/sass/libs.scss', config.srcDir+'/sass/style.scss', config.srcDir+'/sass/responsive.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('main.css'))
    .pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./design/okay_shop/css'));
});

gulp.task('watch', function () {
    gulp.watch(config.srcDir+'/'+config.sassPattern, ['sass'])
});

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

Удачи! Пишите в комментариях, какой вариант вам приглянулся больше.