Как передать параметры в задачу gulp
Инструменты

Как передать параметры в задачу gulp

Gulp.js — это набирающий все большую популярность сборщик frontend-проектов. Он использует потоки, благодяря чему является действительно очень быстрым. К тому же, число различных плагинов для gulp постоянно растет. Синтаксис задач (тасков) gulp довольно простой, разобраться в файле сборки или написать собственный не составляет труда. В статье мы рассмотрим, как передать параметры в задачу gulp.

Практический пример

Но для начала рассмотрим пример. Допустим, нам нужна задача, которая будет минимизировать JavaScript-файл. В этом файле делается JSONP-запрос, но url запроса будет отличаться для разных окружений. На продакшене мы используем продовый API, на деве — тестовый. Такая необходимость вполне может возникнуть на реальном проекте.

Для решения этой задачи, мы можем заменять url на этапе сборки. Для этого можно, например, использовать плагин gulp-replace-task. Для этого в наш исходный таск:


var gulp        = require('gulp'),
    clean       = require('gulp-clean'),
    uglify      = require('gulp-uglify');

gulp.task('js', function() {
    /**
     * Удалим итоговый файл
     */
    gulp.src(['assets/app.js'], { read: false })
        .pipe(clean());

    gulp.src('web/js/app.src.js')
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('web/assets/'));
});
Добавим команду replace.

var gulp        = require('gulp'),
    clean       = require('gulp-clean'),
    uglify      = require('gulp-uglify'),
    replace     = require('gulp-replace-task');

gulp.task('js', function() {
    /**
     * Замена url
     */
    var patterns = [{match: 'API_URL', replacement: 'https://prod-server.com'}];

    /**
     * Удалим итоговый файл
     */
    gulp.src(['assets/app.js'], { read: false })
        .pipe(clean());

    gulp.src('js/app.src.js')
        .pipe(concat('app.js'))
          .pipe(replace({ patterns: patterns }))
        .pipe(uglify())
        .pipe(gulp.dest('web/assets/'));
});

В самом файле вместо адреса API будем использовать строку @@API_URL. На этапе сборки эта строка будет заменена на адрес сервера.

Отлично, мы сделали замену url. Но для дев-окружения url должен быть другой.

Разные таски для разных окружений

Первый вариант, который приходит в голову — сделать второй таск, который будет подставлять адрес тестового сервера:


gulp.task('js-dev', function() {
    /**
     * Замена url
     */
    var patterns = [{match: 'API_URL', replacement: 'https://dev-server.com'}];

    /**
     * Удалим итоговый файл
     */
    gulp.src(['assets/app.js'], { read: false })
        .pipe(clean());

    gulp.src('js/app.src.js')
        .pipe(concat('app.js'))
          .pipe(replace({ patterns: patterns }))
        .pipe(uglify())
        .pipe(gulp.dest('web/assets/'));
});

Вызывать эти таски нужно будет, соответственно, так:


gulp js
gulp js-dev

Это тоже приемлемое решение, но оно имеет очевидные недостатки: сами таски абсолютно идентичны, за исключением параметров подстановки. При добавлении нового окружения нужно будет снова копировать таск.

Передача парамтеров в таск

А теперь рассмотрим непосредственно передачу параметров. Gulpfile выполняется под Node.js, а значит любой модуль Node.js мы можем использовать в задаче gulp'a. Для передачи параметров воспользуемся модулем yargs. Сначала подключим модуль:


var gulp        = require('gulp'),
    clean       = require('gulp-clean'),
    uglify      = require('gulp-uglify'),
    replace     = require('gulp-replace-task'),
    args        = require('yargs').argv;

Теперь переданные параметры можно получить из объекта args.


gulp.task('js', function() {
    /**
     * Замена для различных окружений
     */
    var env      = args.env || 'prod',
        patterns = {
            dev: [{match: 'API_URL', replacement: 'https://dev-server.com'}],
            prod: [{match: 'API_URL', replacement: 'https://prod-server.com'}]
        };

    /**
     * Удалим итоговый файл
     */
    gulp.src(['assets/app.js'], { read: false })
        .pipe(clean());

    gulp.src('js/app.src.js')
        .pipe(concat('app.js'))
          .pipe(replace({ patterns: patterns[env] }))
        .pipe(uglify())
        .pipe(gulp.dest('web/assets/'));
});

Несколько слов о примере выше. В переменную env мы сохранили значение параметра env (если параметр не передан, считаем его равным ‘prod’). Затем немного изменили patterns — теперь он хранит шаблоны для различных окружений. И наконец, в команду replace мы передаем значения шаблонов уже для конкретного окружения.

Теперь вызывать наш таск можно так:


gulp js --env dev
gulp js --env prod
gulp js // по умолчанию prod

Заключение

Работать с Gulp.js действительно удобно и приятно. В статье мы рассмотрели, как можно передать параметры в задачу. Используя другие плагины для gulp или модули Node.js можно создавать действительно функциональные таски и экономить значительное количество времени при разработке.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться