В нашей компании проводятся еженедельные обучения для программистов. В этот раз мы разбирались с инструментом для автоматизации повторяющихся задач - Gulp. Рассмотрели что такое Gulp, зачем он нужен, как с ним работать, а также разобрали на практике как им пользоваться.
Однотипные задачи неизбежны при сборке проектов. На их решение может уйти ни один час работы и выполнение последовательных операций. Одним словом - рутина.
Если вы часто сталкиваетесь с компиляцией Sass/Less в CCS, минификацией, конкатенацией файлов css/js, обработкой изображений и далее по списку, то наверняка слышали о Gulp. Или использовали аналогичные инструменты, вроде Grunt.
В таких случаях, обращение к Gulp неизбежно - при его помощи можно написать любой конфигурационный файл. Инструмент предназначен для задач произвольного типа и позволяет упростить работу в разы.
Какие задачи решает Gulp:
- Работа с Javascript, HTML и CSS-файлами - минимизация и конкатенация отдельных файлов в один;
- Использование CSS препроцессоров Sass, Less, Stylus, Jade и т.д.;
- Работа с изображениями - оптимизация и сжатие;
- Автоматическая простановка вендорных префиксов для CSS;
- Удаление неиспользуемого CSS (UnCSS);
- Валидация кода и его тестирование.
Без должной подготовки непросто использовать Gulp на постоянной основе. Для начала стоит детально рассмотреть, на каких принципах построен gulp.
Для работы с Gulp нужно установить Node.js. Скачать его можно по ссылке: https://nodejs.org/en/download/. Этот движок занимается процессом чтения и записи данных - потоков. Потоки предлагают удобный интерфейс для асинхронной работы с данными. Node.js вызывает соответствующие колбэки при появлении новой порции данных, возникновении ошибки, окончании потока и т.д. Таким образом, достигается эффективность ввода и вывода при минимальных затратах со стороны программиста.
Инструкция по работе с Gulp
У вас уже должен быть установлен Node.js. Откройте командную строку и введите команду:
Установка Gulp глобально
npm i gulp -g
npm install – это команда, которую использует Node Package Manager для установки Gulp на компьютер.
Флаг -g указывает, что Gulp надо установить на компьютер глобально, для использования в любом месте системы.
Создание проекта
Команда npm init создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).
npm init
Чтобы добавить gulp в новый проект для разработки, пишем:
npm install gulp-watch --save-dev
Для того, чтобы развернуть имеющийся проект в package.json
npm install
Для выполнения каждой задачи в gulp есть свой плагин. Установить основные плагины для разработки вы можете по ссылке: http://gulpjs.com/plugins/
Нам понадобятся:
npm install gulp-watch --save-dev
npm install gulp-sass --save-dev
npm install gulp-rigger --save-dev
npm install gulp-rename --save-dev
npm install gulp-imagemin --save-dev
npm install imagemin-pngquant --save-dev
npm install imagemin-jpegoptim --save-dev
npm install imagemin-mozjpeg --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-uglify --save-dev
npm install gulp-cssnano --save-dev
npm install gulp-util --save-dev
npm install gulp-cache --save-dev
Основные понятия Gulp
gulpfile.js
Файл gulpfile.js находится в корне папки проекта. Он содержит все инструкции - какие модули используются, какие задачи выполняются. В начале файла подключается сам Gulp и его модули, которые будут использованы:
var
gulp = require('gulp'),
watch = require('gulp-watch'),
sass = require('gulp-sass'),
rigger = require('gulp-rigger'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
jpegoptim = require('imagemin-jpegoptim'),
mozjpeg = require('imagemin-mozjpeg'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
svgmin = require('gulp-svgmin'),
cssnano = require('gulp-cssnano'),
gutil = require('gulp-util'),
cache = require('gulp-cache');
Task
Это команда, которая должна быть описана в gulpfile.js для вызова в последующей работе. Его синтаксис описания:
gulp.task('mytask', function(){
// код функции
console.log('Hello world!');
});
Task вызывается из консоли как
gulp mytask
Выборка файлов для обработки - gulp.src
Он служит для выборки файлов, над которыми будет выполняться task:
gulp.src( path_to_files )
Для обработки всех jpg из папки src/img
gulp.src( 'src/img/*.jpg')
Для обработки всех jpg из папки src/img, включая подпапки
gulp.src( 'src/img/**/*.jpg')
Для обработки всех jpg и png из папки src/img включая подпапки
gulp.src( 'src/img/**/*.+(png|jpg)')
Можно задавать несколько условий выборки файлов в виде массива.
gulp.src(['src/js/*.js', 'src/another_js/*.js'])
Можно задавать исключения, используя “!”. Обработка всех файлов js из папки src/js кроме файла src/js/js.js
gulp.src(['src/js/*.js', '!src/js/js.js'])
Вызов плагина для обработки - .pipe()
Этот метод обрабатывает файл с помощью указанного плагина.
pipe( plugin() )
Для последовательной обработки файла несколькими плагинами pipe соединяются в цепочку
pipe( plugin1() ).pipe( plugin2() ).pipe( plugin3() )
Вывод результата - gulp.dest
gulp.dest( path_to_files )
path_to_files - это папка, в которую надо сохранить результат обработки. Например:
gulp.dest('www/js/')
Описание Task
gulp.task('mytask', function(){
return gulp.src('src/js/*.js') // выборка js-файлов из src/js/
.pipe(uglify()) // минификация js плагином uglify
.pipe(rename({suffix: '.min'})) // добавление суффикса .min
.pipe(gulp.dest('www/js/')); // сохранение в www/js/
});
Watch
Позволяет отслеживать изменения файлов и запускать соответствующие таски gulp.watch( path_to_files, [‘task_name’] ); path_to_files - файлы, за которыми следим [‘task_name’] - массив с названиями тасков, которые надо запускать при изменении файлов.
Пример:
gulp.watch('src/js/**/*.js', ['js']);
Start
Выполняет запуск задачи
gulp.start('task_name');
Основные задачи и плагины
CSS и препроцессоры
- С помощью плагина gulp-sass - мы можем компилировать SCSS в CSS.
- gulp-less - компилирует LESS в CSS.
- gulp-autoprefixer - добавляет префиксы браузеров для нестандартных CSS свойств.
- Плагин gulp-cssnano - минифицирует все.
Пример таска
gulp.task('scss', function(){
return gulp.src('src/scss/*.scss')
.pipe(sass().on('error', gutil.log))
.pipe(autoprefixer({
browsers: ['since 2011'],
cascade: false
}))
.pipe(gulp.dest('www/files/css'))
.pipe(cssnano())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('www/files/css'));
});
При работе с JS
Используем плагин gulp-uglify.
Пример:
gulp.task('js', function(){
return gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('www/files/js/'));
});
Сжатие изображений
Используем плагины:
- для png - imagemin-pngquant
Пример:
.pipe( imagemin([ pngquant({quality: 90}) ],{verbose:true}) )
- для jpg - imagemin-jpegoptim, imagemin-mozjpeg
Пример:
.pipe( imagemin([ mozjpeg({quality: 85}) ],{verbose:true}) )
Включение кода другого файла gulp-rigger
Работает любом файле - js, css, scss. Он удобен для сборки в один файл, если нужно учитывать порядок включения файлов.
//= folder/file.js
В дальнейшем заменяется на код файла.
gulp-cache
Обеспечивает кэширование результатов обработки файлов.
Использование:
.pipe( cache( plugin() ) )
Пример:
gulp.task('jpeg', function(){
return gulp.src('src/img/**/*.jpg')
.pipe(
cache(
imagemin([ mozjpeg({quality: 85}) ],{verbose:true})
)
)
.pipe(gulp.dest('www/files/img'));
});
Обработка ошибок
Если в процессе обработки файла возникает ошибка, то весь таск прерывается. Дальнейшие файлы не обрабатываются.
Если таск был запущен через watch и запустился после изменения файла, то при ошибке в нем будет прервано и дальнейшее наблюдение за файлами. Чтобы такого не происходило надо отлавливать ошибки. Это делает плагин gulp-util. Его надо подключить в начале gulpfile.js.
var gutil = require('gulp-util');
Добавить к каждому плагину, у которого возможна ошибка:
.on('error', gutil.log)
Ошибка будет выведена в консоль, но наблюдение и обработка файлов продолжится.
Пример:
gulp.task('js', function(){
gulp.src('src/js/*.js')
.pipe(rigger().on('error', gutil.log))
.pipe(gulp.dest('www/files/js/'));
});
Надеемся, что вам удалось применить Gulp в своей работе. На данный момент он является более эффективным инструментом при сборке проектов и web-приложений.
Также советуем вам просмотреть интересный кейс.
