Gulp
Для начала очень кратко что же такое этот Gulp и в решении каких задач он вам поможет: Gulp - это инструмент автоматизации frontend разработки, написанный на языке программирования JavaScript. Он поможет вам автоматизировать рутинные задачи и ускорит вашу работу.
Основные задачи, которые вам поможет решить Gulp:
Звучит воодушевляюще, так давайте скорее устанавливать это чудо.
Установка Gulp глобально
На вашем компьютере должен быть установлен Node.js. После установки Node.js запустите командную консоль. Сначала gulp надо установить глобально. Для этого в консоль вводим команду:
npm install gulp-cli -g
Создание проекта
Теперь давайте уже создадим проект, к которому будем применять Gulp или настроим Gulp для уже имеющегося у вас проекта. Для этого создадим папку myproject, перейдем в нее в консоли и выполним в этой папке инициализацию проекта, введя в консоли команду:
npm init
Далее просто следуйте инструкциям в консоли и вы заполните метаинформацию о проекте: название, версию, описание, имя автора и остальные данные, которые можно оставить значениями по-умолчанию, просто нажимая Yes.
В результате этой первоначальной настройки нашего нового Gulp проекта в папке myproject появится новый файл package.json. Файл package.json является файлом манифеста нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте, например, о gulp.
Давайте сразу создадим первоначальную структуру нашего проекта по всем правилам хорошего тона веб-разработки.
В проекте будет две папки src и public. В папке src/ будут размещены все исходные материалы проекта: оригинальные CSS, Sass, js файлы библиотек, оригинальные изображения. То есть это папка исходников нашего проекта.
В папке public/ будет содержаться уже готовый продукт, оптимизированный, сжатый, причесанный. Это папка продакшена.
Установка Gulp локально
Теперь нужно установить Gulp локально в папку с нашим проектом. Для этого введем в консоли команду:
npm install gulp --save-dev
Добавив флаг save-dev (или сокращенно можно писать -D), мы автоматически записали информацию о Gulp и его версии в файл package.json. Если вы теперь откроете файл package.json, то увидите, что там появились такие строчки:
"devDependencies": {
"gulp": "^4.0.2"
}
То есть в область «devDependencies» мы записали имя пакета и его версию. Стрелочка вверх обозначает, что этот пакет можно обновлять.
Кратко, чтобы была понятна основная суть: в файле package.json есть две области «dependencies» и «devDependencies».
Пакеты, сохраненные в “devDependencies”, нужны в процессе разработки-тестирования, но не в продакшене (когда публикуете свой проект, эти пакеты туда не войдут, они не нужны вашему проекту для нормального функционирования). А пакеты, сохраненные в “dependencies”, необходимы для работы проекта в продакшене (например, всем известный jQuery).
Если пакет устанавливается с флагом --save,
npm -i some_package --save
то он автоматически добавится в раздел dependencies файла package.json.
Если пакет устанавливается с флагом save-dev,
npm -i some_package --save-dev
то он автоматически добавится в раздел devDependencies файла package.json.
И еще у нас появилась папка node_modules, в которой теперь хранится сам Gulp (папка Gulp) и все его зависимости. В папку node_modules автоматически будут попадать все модули и зависимости, которые мы будем устанавливать в проект.
Установка плагинов для Gulp
Многие активно используют препроцессор Sass, поэтому давайте установим для начала плагин, который будет компилировать Sass в CSS и что главное делать это “на лету”.
Для этого нам понадобится плагин gulp-sass. Для установки gulp-sass запускаем в консоли команду:
npm install gulp-sass --save-dev
Отлично, плагин установлен!
Пришло время создать в корне нашего проекта файл gulpfile.js для управления проектом. Именно в нем будут содержаться все инструкции для сборки нашего проекта. Первым делом подключим gulp, записав в файле gulpfile.js:
var gulp = require("gulp");
Затем подключим наш плагин:
var sass = require("gulp-sass");
require указывает, что надо проверить папку node_modules и найти там папку gulp. Если такая имеется, то ее содержимое записывается в переменную gulp.
А так выглядит простой шаблон задачи в Gulp:
gulp.task("task_name", function () {
return gulp.src("source_files") // путь к файлам-исходникам
.pipe(plugin_name()) // название плагина, через который прогоняем их
.pipe(gulp.dest("destination")) // путь к папке, куда помещаем конечные файлы
})
task-name ссылается на имя задачи, которое вы будете использовать для запуска задачи.
Задачу можно запустить, введя в командной строке:
gulp task-name
Если у задачи имя default - это значит, что она будет выполняться по умолчанию.
gulp.task("default", function() {
// здесь будет код задачи
});
Если в командной консоли мы не укажем имя задачи, а просто напишем gulp, задача default все равно выполнится.
Перепишем задачу применительно к нашему плагину gulp-sass и нашей файловой структуре:
gulp.task("sass", function () {
return gulp.src("./src/sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./public/css"))
})
/sass/**/*.scss означает выбрать все файлы с расширением .scss из всех подпапок папки /sass
.on("error", sass.logError) означает что, если есть ошибки, вывести их в консоль.
Готово! Теперь, запустив в командной строке gulp sass, мы увидим, что в папке /css появились скомпилированные файлы css.
Компиляция “на лету”
Давайте усовершенствуем нашу задачу, чтобы отслеживать изменения, вносимые в файлы sass сразу, “на лету”. Запишем в наш gulpfile.js такие строчки:
gulp.task("watch", function () {
gulp.watch("./sass/**/*.scss", ["sass"]);
});
Метод watch будет смотреть произошли ли какие-либо изменения в файлах .scss и если да, то перезапустит задачу sass.
Запустим в командной строке gulp watch. Он запустится, но потом зависнет и будет ждать отслеживаемых изменений в файле. Внесем в sass изменения и посмотрим страницу. Видим свои изменения. Метод watch отследил изменения и перекомпилировал sass. Чтобы остановить watch используйте сочетание клавиш Ctrl + C. Теперь внося какие-либо изменения в файлы .scss эти изменения сразу отобразятся в соответствующих файлах .css.
В результате у нас получился такой gulpfile.js:
"use strict";
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass", function () {
gulp.src(".src/sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(".public/css"));
});
gulp.task("watch", function () {
gulp.watch(".src/sass/**/*.scss", ["sass"]);
});
Итак, в этой статье мы обзорно узнали, что же такое этот волшебный Gulp, разобрались с его установкой и на примере плагина для компиляции sass в css научились писать задачи.