Легкая автоматизация задач с Gulp.js

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

gulp-808x500[1]
image-978

Gulp предпочитает код по конфигурации. Будучи, что ваши задачи записываются в коде, Gulp дает вам инструменты для создания задач, которые соответствуют вашим потребностям.

Установка

Gulp легко установить и начать работать.

  1. Установка Gulp глобально
  2. Установка Gulp в devDependencies
  3. Создание gulpfile.js

Первый шаг, чтобы установить Gulp глобально.

$ npm install --global gulp

После этого, вам нужно добавить Gulp в devDependencies на любом из ваших проектов где вы хотите использовать его. Убедитесь, что у вас есть package.json. Если у вас есть package.json, давайте установим Gulp в devDependencies

$ npm install --save-dev gulp

И наконец, вы должны создать gulpfile.js в корне проекта, который содержит ваши задачи. В качестве промежуточного шага мы добавим Gulp Utilites модуль, у нас есть исполняемые задачи, которые явно показывает, что она выполнена.

$ npm install --save-dev gulp-util

В файле gulpfile.js, который вы только что создали, мы сделаем простой gulpfile, который только регистрирует, что Gulp работает.

/* File: gulpfile.js */
// grab our gulp packages
var gulp  = require('gulp'),
    gutil = require('gulp-util');
// create a default task and just log a message
gulp.task('default', function() {
  return gutil.log('Gulp is running!')
});

И если все пройдет, как ожидается, работающей Gulp в командной строке должно вам выдать следующее:

> gulp
[12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js
[12:32:08] Starting 'default'...
[12:32:08] Gulp is running!
[12:32:08] Finished 'default' after 1 ms

Обзор

Структура каталога для этого урока

Мы определили следующую структуру нашего проекта. Вы можете создать пустые файлы на данный момент.

public/
  |  assets/
  |  |  stylesheets/
  |  |  |  style.css
  |  |  javascript/
  |  |  |  vendor/
  |  |  |  |  jquery.min.js
  |  |  |  bundle.js
source/
  |  javascript/
  |  |  courage.js
  |  |  wisdom.js
  |  |  power.js
  |  scss/
  |  |  styles.scss
  |  |  grid.scss
gulpfile.js
packages.json

В source мы будем делать нашу работу. assets/style.css создает Gulp, когда мы обрабатываем и объединить наши Sass файлы в source/scss. Файл bundle.js создает так же Gulp, когда мы минимизируем и объединяем все наши JS файлы.

Краткий обзор Gulp

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

Gulp API является очень простым, содержащий 4 функции верхнего уровня.

  • gulp.task
  • gulp.src
  • gulp.dest
  • gulp.watch

gulp.task определяет ваши задачи. Его аргументы name, deps and fn.

Где name строка, deps является массив имен задача, и fn является функция, которая выполняет вашу задачу. deps не является обязательным, по этому gulp.task имеет две формы:

gulp.task('mytask', function() {
  //do stuff
});
gulp.task('dependenttask', ['mytask'], function() {
  //do stuff after 'mytask' is done.
});

gulp.src указывает на файлы, которые мы хотим использовать. Это глобальные параметры и является необязательной опцией. Он использует .pipe для построения цепочки из его вывода в других плагинов.

gulp.dest указывает на папку вывода куда мы хотим записать файлы.

gulp.src и gulp.dest простой пример для копирования файлов выглядит следующим образом:

gulp.task('copyHtml', function() {
  // copy any html files in source/ to public/
  gulp.src('source/*.html').pipe(gulp.dest('public'));
});

gulp.watch как gulp.task имеет две основные формы. Оба возвращает EventEmitter, который выделяют change событий. Первый из которых занимает глобально, необязательный параметр, и массив задач его параметров.

gulp.watch('source/javascript/**/*.js', ['jshint']);

Проще говоря, когда любой из файлов, глобально изменяется, выполняется задача. В приведенном выше примере, когда какие-либо файлы в source/javascript с расширением .js изменятся, то jshint задача будет выполнена в отношении тех файлов.

Вторая форма принимает универсальный символ, дополнительный объект вариантов, и дополнительный обратный вызов, который будет выполняться, если были изменения.

Для получения дополнительной информации обратитесь к API.

Некоторые полезные задачи.

Мы начнем с простых задач.

Jshint  на сохранение

Наша первая задача будет с нашим JavaScript (проверить на наличие ошибок), используя jshint и мы также настроить его для выполнения задания каждый раз, когда мы сохраним файл.

Для начала нам нужен пакет gulp-jshint, установим его с помощью npm. Мы также должны настроить jshint вывод в удобном формате и цветом оформлении.

$ npm install --save-dev gulp-jshint jshint-stylish

Теперь мы добавим задачу в наш gulpfile.

/* File: gulpfile.js */
// grab our packages
var gulp   = require('gulp'),
    jshint = require('gulp-jshint');
// define the default task and add the watch task to it
gulp.task('default', ['watch']);
// configure the jshint task
gulp.task('jshint', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});
// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
});

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

$ gulp

будем следить за выполнением задачи.

Теперь давайте посмотрим на jshint задачи. Его источники любые .js файлы, которые существуют в source/javascript или в подкаталогах. Так файл source/javascript/carousel/main.js будет определена для задачи так же.

Эти файлы затем передаются в наш плагин gulp-jshint, который затем передает его в стилизованный репортер, чтобы выдать нам результаты jshint.

Мы можем выполнить эту задачу, выполнив:

$ gulp jshint

Хорошо, теперь о задаче watch. Это просто на самом деле, если обнаруживается изменение в любом из наших файлов JavaScript, то запускается задача jshint.

Sass компиляция с libsass

Sass расширяет CSS и дает поддержку переменных, вложенных правил, mixins, встроенных импорта, и многое другое.

Для Sass компиляции мы будем использовать gulp-sass

/* file: gulpfile.js */
var gulp   = require('gulp'),
    jshint = require('gulp-jshint'),
    sass   = require('gulp-sass');
/* jshint task would be here */
gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('public/assets/stylesheets'));
});
/* updated watch task to include sass */
gulp.task('watch', function() {
  gulp.watch('source/javascript/**/*.js', ['jshint']);
  gulp.watch('source/scss/**/*.scss', ['build-css']);
});

Мы можем также добавить sourcemaps, используя gulp-sourcemaps.

/* file: gulpfile.js */
var gulp       = require('gulp'),
    jshint     = require('gulp-jshint'),
    sass       = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps');
gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init())  // Process the original sources
      .pipe(sass())
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/stylesheets'));
});

Javascript минификация

При работе с большим количеством JavaScript, вам как правило, необходимо собрать файлы вместе. Общего назначения плагин gulp-concat позволяет выполнить это легко.

Мы также можем пойти дальше и запустить его через минификацию и получить файл гораздо меньшего размера.

gulp.task('build-js', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('bundle.js'))
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/assets/javascript'));
});

Вывод

Мы рассмотрели только самый минимум Gulp. С ним легко соединить файлы JavaScript. Gulp дает вам инструменты, чтобы сделать то что вы хотите быстро и легко.