9 плагинов gulp для сборки проектов
Инструменты

9 плагинов gulp для сборки проектов

Оригинал: 9 gulp.js plugins for a great build system, Alex Gorbatchev

Эта статья предполагает, что у вас уже есть некоторый опыт работы с Node.js, npm и вы довольно хорошо знакомы с концепцией сборщиков и интерфейсом командной строки. Это те базовые вещи, которые необходимы, чтобы начать работать с gulp.js.

Как и другие системы сборки, все начинается с установки самого gulp’а командой npm install gulp и создания файла сборки gulpfile.js в корневой директории проекта. Для тех людей, вроде меня, которые сразу же хотят знать, поддерживает ли gulp.js CoffeeScript, ответ — да, но для этого необходимо добавить require(’./gulpfile.coffee’) в gulpfile.js.

Теперь, когда мы со всем этим разобрались, давайте настроим сборщик для поддержки нашего HTML5 node.js приложения.

gulp-util

Source: gulp-util (Github: gulpjs/gulp-util , License: MIT)

Это официальный инструмент для gulp.js. Авторы решили выделить вспомогательные функции в отдельный модуль, который, в конечном итоге, все равно нужно каждый раз подключать. Сюда относится такая функциональность, как логирование, подсветка вывода в консоли, и так далее. Полный список можно посмотреть на странице gulp-util на Github.

Поскольку это вспомогательный модуль, нет конкретного примера, где мы могли бы его использовать, мы будем его использовать все время.

gulp-clean

Source: gulp-clean (Github: peter-vilja/gulp-clean , License: MIT)

Первое, что должна сделать любая уважающая себя система сборки, это очистить сборочную директорию и удалить все, в ней находится.


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

gulp.task('clean', function () {  
    return gulp.src('build', {read: false})
        .pipe(clean());
});

Теперь вы можете запустить команду gulp clean и директория build будет очищена.

gulp-concat

Source: gulp-concat (Github: wearefractal/gulp-concat , License: MIT)

Можно предположить, что ваше HTML5 приложение имеет несколько внешних зависимостей, таких как jQuery, возможно Modernizr и т.д. Вместо того, чтобы подключать зависимости в отдельных тегах <script> на странице, было бы прекрасно объединить их в один файл. Для этого подойдет gulp-concat:


var concat = require('gulp-concat');

gulp.task('vendor', function() {  
    return gulp.src('vendor/*.js')
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest('build/vendor.js'))
});

Теперь запустим команду gulp vendor, которая объединит все *.js файлы в директории vendor в build/vendor.js.

gulp-uglify

Source: gulp-uglify (Github: terinjokes/gulp-uglify , License: MIT)

Следующая вещь, которую мы должны сделать - это минимизировать наш vendor.js. Добавим добавим это в задачу vendor.


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

gulp.task('vendor', function() {  
    return gulp.src('vendor/*.js')
        .pipe(concat('vendor.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/vendor.js'))
});

Обратите внимание, что вместо создания отдельной задачи minifying, мы просто добавили еще один вызов в поток. По сути, это все, что можно сказать о gulp.js — применяйте правильные инструменты!

Это также то место, где сборка может работать неправильно, т.к. gulp-uglify выбрасывает ошибку, если у вас некорректный синтаксис JavaScript. Давайте добавим обработку ошибки:


var gutil = require('gulp-util');

gulp.task('vendor', function() {  
    return gulp.src('vendor/*.js')
        .pipe(concat('vendor.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/vendor.js'))
        .on('error', gutil.log)
});

gulp-rename

Source: gulp-rename (Github: hparra/gulp-rename , License: MIT)

Хотите, чтобы уменьшенная и минифицированная версия хранились рядом? Не проблема! Давайте доработаем задачу vendor, чтобы она создавала одновременно vendor.js и vendor.min.js.


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

gulp.task('vendor', function() {  
    return gulp.src('vendor/*.js')
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest('build'))
        .pipe(uglify())
        .pipe(rename('vendor.min.js`))
        .pipe(gulp.dest('build'))
        .on('error', gutil.log)
});

Обратите внимание, что gulp.dest используется дважды. Это отличная фишка gulp.js — все является потоком. Добаление вызова gulp.dest записывает все, что мы имеем на данный момент, на диск, и мы можем обрабатывать данные дальше и снова сохранить состояние. Клево, да?

gulp-filesize

Source: gulp-filesize (Github: Metrime/gulp-filesize , License: MIT)

Не знаю, как вы, а я всегда хочу знать размер файла после минификации. Представляете что — не я один, есть даже плагин для этого.


var filesize = require('gulp-filesize');

gulp.task('vendor', function() {  
    return gulp.src('vendor/*.js')
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest('build'))
        .pipe(filesize())
        .pipe(uglify())
        .pipe(rename('vendor.min.js`))
        .pipe(gulp.dest('build'))
        .pipe(filesize())
        .on('error', gutil.log)
});

Опять же, видите, что filesize вызывается дважды? В первый раз, он выведет размер исходного файла, а второй - минимизированного.

gulp-less

Source: gulp-less (Github: plus3network/gulp-less , License: MIT)

Представим, что вы используете прекрасный препроцессор LESS для генерации CSS файлов и теперь хотите их сгенерировать. gulp-less поможет!


var less = require('gulp-less');  
var path = require('path');

gulp.task('css', function () {  
    return gulp.src('less/**/*.less')
        .pipe(less({
            paths: [ path.join(__dirname, 'less', 'includes') ]
        }))
        .pipe(gulp.dest('build/css'))
        .on('error', gutil.log);
});

Запуск команды gulp css скомпилирует все less файлы из директории less и запишет в build/css.

gulp-changed

Source: gulp-changed (Github: sindresorhus/gulp-changed , License: MIT)

Я был бы несчастлив, если бы каждый раз, когда я запускаю gulp css все мои файлы перегенерировались бы независимо от того, были ли изменены исходные файлы LESS или нет. Чтобы исключить неизмененные файлы можно использовать gulp-changed.


var changed = require('gulp-changed');

gulp.task('css', function () {  
  return gulp.src('less/**/*.less')
    .pipe(changed('build/css'))
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('build/css'))
    .on('error', gutil.log);
});

gulp-watch

Source: gulp-watch (Github: floatdrop/gulp-watch , License: MIT)

Было бы реально клево, если не нужно было выполнять gulp css каждый раз, когда вы делаете изменение, не так ли? Давайте настроим задачу таким образом, чтобы она отслеживала изменения в файлах и компилировала их нужным образом.

gulp-watch несколько отличается от других плагинов, мы используем его вместо gulp.src в качестве отправной точки.


var watch = require('gulp-watch');

gulp.task('css:watch', function () {  
  watch({
    glob: 'less/**/*.less',
    emit: 'one',
    emitOnGlob: false
  }, function(files) {
    return files
      .pipe(less({
        paths: [ path.join(__dirname, 'less', 'includes') ]
       }))
      .pipe(gulp.dest('build/css'))
      .on('error', gutil.log);
  });
});

Команда gulp css:watch будет следить на всеми файлами LESS и компилировать только измененный.

Все вместе

Теперь соберем все вместе в gulpfile.js.


var path = require('path');  
var gulp = require('gulp');  
var gutil = require('gulp-util');  
var clean = require('gulp-clean');  
var concat = require('gulp-concat');  
var uglify = require('gulp-uglify');  
var rename = require('gulp-rename');  
var filesize = require('gulp-filesize');  
var less = require('gulp-less');  
var changed = require('gulp-changed');  
var watch = require('gulp-watch');

gulp.task('clean', function () {  
  return gulp.src('build', {read: false})
    .pipe(clean());
});

gulp.task('vendor', function() {  
  return gulp.src('vendor/*.js')
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('build'))
    .pipe(filesize())
    .pipe(uglify())
    .pipe(rename('vendor.min.js`))
    .pipe(gulp.dest('build'))
    .pipe(filesize())
    .on('error', gutil.log)
});

gulp.task('css', function () {  
  return gulp.src('less/**/*.less')
    .pipe(changed('build/css'))
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('build/css'))
    .on('error', gutil.log);
});

gulp.task('css:watch', function () {  
  watch({
    glob: 'less/**/*.less',
    emit: 'one',
    emitOnGlob: false
  }, function(files) {
    return files
      .pipe(less({
        paths: [ path.join(__dirname, 'less', 'includes') ]
      }))
      .pipe(gulp.dest('build/css'))
      .on('error', gutil.log);
  });
});

Заключение

Что мне действительно нравится в gulp.js — это то он представляется мне полной коробкой инструментов, каждый инструмент в которой служит отдельной цели, с помощью которой я могу сделать практически все. Это удивительно, как в течении пары месяцев сообщество написало более 300 плагинов.

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