Как в Gulp сделать отдельную задачу для сборки на продакшн?

Question

[Олег]

Есть gulpfile, в котором прописаны задачи. Есть задача build, которая объединяет мелкие задачи. Есть задача default, которая запускает по очереди build, watch и browsersync.

Вопрос в следующем. Хотелось бы в целях производительности убрать все ненужные для работы операции, такие как: простановка префиксов, сжатие изображений, сжатие CSS и JS файлов и т.д. А так же добавить, например, sourcemaps.

Как мне сделать две задачи: первая для работы, вторая для продакшна?
По сути они очень похожи, но чуть чуть отличаются. Неужели надо дублировать весь код 2 раза? Я чувствую, что есть более грамотный подход.

Answer 1

[sergey]

Дублировать ничего не нужно, вот пример моего gulpfile.js:

// Configuring paths and options for different environments
env = process.env.NODE_ENV || 'dev';

if (env === 'dev') {
    outputDir = 'builds/development/';
    sassStyle = 'expanded';
    sassComments = true;
} else {
    outputDir = 'builds/production/';
    sassStyle = 'compressed';
    sassComments = false;
}

//и потом к примеру в стилях у меня 
....
.pipe(gulpIf(env !== 'dev', cleanCSS({compatibility: 'ie8'})))

// в js
...
.pipe(gulpIf(env !== 'dev', uglify()))
....
просто меняю env на === и собираю стили и скрипты для продакшн (оптимизированы)

и т.д по сути заменяя лишь значения с !== на === собираются 2 сборки: или builds/development /или builds/production/

Comments

[Олег]

Спасибо, это то, что нужно! Без вебшторма да, тяжело)

[sergey]

Олег: пожалуйста, если помог то можно отметить ответ:)

[Олег]

Sagan: отметил.

Нашёл решение даже ещё лучше.

Команда

gutil.env.production

возвращает true, если мы при запуске галпа добавляем ключ --production, во всех остальных случаях undefined.

Чтобы команда работала, нужен плагин gulp-util.

Соответственно мы можем присвоить это значение переменной и потом делать что-то вроде этого:

var prod = gutil.env.production;
var dist = prod ? 'production/' : 'dist/';

gulp.task('js-libs', function() {
	return gulp.src(app + 'src/libs.js')
		.pipe(prod ? uglify() : gutil.noop())
		.pipe(gulp.dest(dist + 'js'))
		.pipe(reload({stream: true}));
});

Answer 2

[Dark Hole]

Сделать отдельную параметризированную функцию, к примеру.
Не стоит забывать, что gulpfile - это полноценный файл JS, и творить с ним можно приблизительно то же.