Условный запуск задач в Gulp с флагами командной строки

Быстрый ответ

Да, возможно передать флаги в Gulp с помощью модуля yargs. Запуск gulp task --flag позволяет варьировать поведение задач в зависимости от флага. Пример задачи для обработки стилей CSS представлен ниже:

const gulp = require('gulp');
const argv = require('yargs').argv;
const minifyCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', () => 
  gulp.src('src/css/*.css')
    .pipe(argv.production ? minifyCSS() : sourcemaps.init())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css'))
);

Если запустить задачу gulp styles --production, то будет произведена минификация CSS. В случае запуска задачи gulp styles без указания флага, будут создаваться карты кода.

Улучшение задач за счет использования дополнительных инструментов

Возможности yargs можно дополнительно расширить с помощью парсинга командной строки. Это можно сделать, сочетая его с gulp-if для более эффективной работы. Ниже показан пример такого взаимодействия:

const gulpif = require('gulp-if');

gulp.task('scripts', () => 
  gulp.src('src/js/*.js')
    .pipe(gulpif(argv.uglify, uglify()))
    .pipe(gulp.dest('dist/js'))
);

При выполнении команды gulp scripts --uglify произойдёт минификация JavaScript. Без указания флага исходники не будут изменяться.

Выполнение задач в зависимости от условий

В gulp для условных проверок можно снова использовать флаги, как показано ниже:

function isProduction() {
  return argv.production === true;
}

gulp.task('images', () => 
  gulp.src('src/images/*')
    .pipe(gulpif(isProduction(), imagemin()))
    .pipe(gulp.dest('dist/images'))
);

Команда gulp images --production будет проводить оптимизацию изображений при необходимости.

Создание окружения для выполнения специфических задач

С помощью переменных среды Node.js process.env можно сконфигурировать ориентированные на конкретное окружение задачи:

gulp.task('deploy', () => {
  if (process.env.NODE_ENV === 'production') {
    // Логика для рабочего окружения
  } else {
    // Логика для остальных окружений
  }
});

Если задать переменную NODE_ENV=production gulp deploy, выполнение задачи будет вести себя соответственно.

Визуализация

Продемонстрируем гибкость Gulp:

           Обычный режим       |  Режим с флагами      
--------------------------------|-----------------------
Без флага (🔧):                 | С флагом (🚀🔧):
  * Задача А – обычное действие |  * Задача А – усиленное выполнение
  * Задача В – обычное действие |  * Задача В – пользовательская настройка
  * Задача С – обычное действие |  * Задача С – максимальная эффективность

Процесс трансформации контролируется таким образом:

gulp task --production // 🔧 превращается в 🚀🔧

Обычный режим – это базовый вариант 🔧, а при применении флагов он становится усиленным 🚀🔧!

Управление минификацией и картами кода

Настройте минификацию для рабочего окружения:

const uglify = require('gulp-uglify');

gulp.task('compress', () => 
  gulp.src('scripts/*.js')
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulp.dest('scripts'))
);

Управляйте созданием карт кода:

gulp.task('js', () => 
  gulp.src('src/js/**/*.js')
    .pipe(gulpif(!argv.production, sourcemaps.init()))
    .pipe(babel())
    .pipe(gulpif(!argv.production, sourcemaps.write('.')))
    .pipe(gulp.dest('dist/js'))
);

Запуск gulp js --production отключает создание карт кода для более быстрой сборки.

Динамические изменения имен файлов

Вы можете использовать флаги для изменения имен файлов или путей, что полезно для версионирования:

const rename = require('gulp-rename');

gulp.task('rename', () => 
  gulp.src('*.css')
    .pipe(gulpif(argv.suffix, rename({suffix: '.min'})))
    .pipe(gulp.dest('dist'))
);

Команда gulp rename --suffix добавляет .min â конец имени каждого файла.

Полезные материалы

1. yargs – npm — Парсинг аргументов с применением в Gulp пользовательских флагов.
2. gulp-if – npm — для условного выполнения задач в Gulp в определенных условиях.
3. Строение и разработка сайтов с помощью Gulp – Smashing Magazine — Умное сочетание возможностей Gulp и Node.js.
4. gulp-util – npm — Настройка процесса сборки Gulp, часто включающая использование флагов.
5. Быстрый старт в Gulp.js — Лучшие практики применения Gulp.