Использование 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']);
Удачи! Пишите в комментариях, какой вариант вам приглянулся больше.
Комментарии
Пока нет комментариев
Оставить комментарий