Pull to refresh

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

Reading time 2 min
Views 26K
Последнее время почти в любом проекте требуется сделать сборку 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) — кому интересно, смотрите исходники.

С любыми пожеланиями можете писать в личку или на почту — affka@affka.ru
Удачного времени суток!
Tags:
Hubs:
+8
Comments 33
Comments Comments 33

Articles