gulpfile в 10 строк? Легко! — упрощаем создание типовых задач

Последнее время почти в любом проекте требуется сделать сборку less/sass/css/js/html и т.д. файлов. Gulp является отличным решением для выполнения этих задач, это глоток воздуха после grunt'a, но и он не идеален.

Например, если нужно сделать сборку common js, используя browserify, то нужно подключать с десяток зависимостей и писать почти 50 строчек кода. Вот один из примеров.

Нужно упрощать gulpfile.js

Проблема

Когда создаешь новый проект, то приходится каждый раз устанавливать с десяток npm модулей и таскать из проекта в проект 50+ строк кода, что весьма неудобно и попутно можно что-нить сломать/забыть, если разработчик не стал вчитываться в код, который перетаскивает и изменяет.

Решение

В результате родилось решение в виде npm модуля gulp-easy, которое делает жизнь лучше. В модуле накоплены «кейсы», которые встречались в каждом нашем проекте:

1. Каждый gulp файл имеет на выходе две задачи: default для разработчика и production для релизов в продакшен.
2. В режиме продакшена включается компрессия, а в режиме разработчика включается «слушание» (watch) изменений и добавляется sourcemap
3. Наиболее популярные компиляции — это common js -> bundle и less -> css
4. Ошибки, которые происходят при компиляции (в режиме watch) нужно подавлять, чтобы процесс не умер незаметно.
5. Для css и js файлов неплохо бы всегда создавать gzip
6. Базовая директория исходников и директория для публикации обычно выносятся в конфигурацию

В итоге типовые задачи можно сократить до такого вида:

require('gulp-easy')(require('gulp'))
        .config({
            dest: 'app/public'
        })
        .less(['less/header.less', 'less/main.less'], 'style.css')
        .js('js/index.js', 'app/public/lib/main.js')

Этот код создает следующие задачи для gulp:

• Соединяет и компилирует less файлы less/header.less, less/header.less в css файл app/public/style.css. Базовая директория указана в конфигурации.
• Компилирует common js код из файла js/index.js в файл app/public/lib/main.js.
• Подписывается на изменение исходников и выполняет соотвествующие задачи при их изменении.

А если задачи выходят за рамки компиляции js и css кода, то можно добавить свою задачу:

require('gulp-easy')(require('gulp'))
    // ...
    .task(function(gulp, taskName, isCompress, isWatch) {
        gulp.src(['images/*']).pipe(gulp.dest('public/images2/'));
    }, function(gulp, taskName, isCompress) {
        gulp.watch(['images/*'], [taskName]);
    })

Которая копирует все файлы из директории images в директорию public/images2 и подписывается на изменение файлов в исходниках.

Подробное описание всех доступных методов можно увидеть в документации на гитхабе.

Че за… (а кому это нужно?)

Действительно, модуль gulp-easy писался для своих нужд. Но вполне вероятно, что у вас схожие типовые задачи или вы сделаете форк и реализуете свои задачи в подобном стиле. Так что кому-то должно пригодиться данное решение.

Бонус

В качестве эксперимента и собственного развития я написал этот модуль в стиле es6 — с использованием классов, наследований и импорта/экспорта. На node.js это запускается при помощи babel (да, Node.js 4.0.0 поддерживает некоторые вещи из es6, но далеко не все — например там нет конструкций import/export) — кому интересно, смотрите исходники.

С любыми пожеланиями можете писать в личку или на почту — [e-mail]
Удачного времени суток!