Повторяющиеся задачи, такие как компиляция SASS в CSS, объединение и минимизация кода CSS и Javascript, сжатие изображений, перенос кода ES6 в кроссбраузерность ES5 и развертывание файлов, готовых к производству, отнимают у разработчика много времени. На самом деле они тратят очень мало времени на кодирование по сравнению с суммой этих трудоемких задач, которые необходимо повторять каждый раз, когда вносятся изменения.

К счастью, даже несмотря на то, что оптимизация ресурсов нашего веб-сайта, безусловно, не самая интересная часть процесса разработки, с правильными инструментами она может стать намного проще и удобнее. Вот тут-то и пригодятся инструменты сборки. Эти инструменты спасения жизни помогают нам автоматизировать утомительные общие задачи, которые снижают нашу продуктивность, и оптимизируют рабочий процесс разработки. Думайте о них, как о своей маме в свое время, когда она готовила вам завтрак, чтобы вы не опоздали на экзамен, который у вас был в понедельник утром.

Что такое Gulp и зачем его использовать?

Gulp.js - это инструмент сборки с открытым исходным кодом, используемый для автоматизации и, таким образом, улучшения рабочего процесса разработки. Он построен на Node.js, а его задачи написаны на Javascript, что делает его идеальным средством выполнения задач для современного фронтенд-разработчика, любящего javascript.

На своем веб-сайте они заявляют, что являются набором инструментов для автоматизации болезненных или трудоемких задач в рабочем процессе разработки, чтобы вы могли перестать возиться и что-то построить. Его можно использовать, например, для компиляции SASS, синтаксического анализа и редактирования Javascript или CSS, а еще лучше - на языке, с которым вы, вероятно, уже хорошо знакомы.

Какие еще инструменты сборки у нас есть?

Инструменты сборки существуют уже некоторое время. Grunt был очень популярен примерно в 2014 году, и он имеет очень большую библиотеку плагинов, которые позволяют выполнять ряд различных задач. Однако этот подход сильно отличается от Gulp, в котором есть плагины для выполнения небольших индивидуальных задач.

В целом Gulp значительно упрощает процесс настройки по сравнению с Grunt. Простая задача Grunt потребует большого объекта, а не нескольких строк кода с Gulp.

Gulp действительно вносит несколько улучшений в сцену инструментов сборки. Однако, конечно, он сам по себе не идеален, и другие более свежие инструменты сборки привлекают внимание сообщества разработчиков - возьмем, к примеру, Webpack или Brunch.

Запуск и запуск Gulp

Настройка Gulp - это быстрый и простой процесс, но перед тем, как начать, убедитесь, что на вашем компьютере установлен Node.js. Как только вы его получите, вы готовы выполнить следующие действия.

Сначала установите Gulp CLI глобально. Это позволяет запускать команду Gulp из любого каталога.

npm install gulp-cli -g

Затем установите Gulp локально в каталог вашего проекта. При этом Gulp устанавливается как зависимость для разработки вашего проекта и соответствующим образом обновляет файл package.json.

npm install gulp --save-dev

Обратите внимание, что зависимости разработки не устанавливаются, если для переменной NODE_ENV задано значение production. В этом случае Gulp можно установить как зависимость приложения, запустив следующее.

npm install gulp --save

Gulpfile

Хорошо, Gulp готов к работе. Просто, не правда ли? Все, что нам нужно сделать, это настроить gulpfile.js. Это файл конфигурации, созданный в корне каталога нашего проекта.

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

Задачи Gulp!

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

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

gulp.task("hello", function() {
    console.log("Hello World!");
});

Итак, при запуске gulp hello будет напечатано «Hello World!» к консоли.

Большой! Мы написали нашу первую задачу Gulp, даже несмотря на то, что эта задача не приносит особой оптимизации рабочего процесса. Для этого нам придется использовать один из тысяч существующих плагинов (мы также можем написать плагин самостоятельно, но почти наверняка уже есть тот, который выполняет нужную нам задачу).

Для поиска плагинов мы можем перейти непосредственно в библиотеку Gulp или выполнить поиск в репозитории пакетов NPM.

Чтобы установить плагины, мы запускаем npm install точно так же, как мы это делаем для установки Gulp.

Прежде чем мы углубимся, полезно отметить, что Gulp имеет только 5 методов: .task , .watch, .run, .src и .dest.

Вызов плагина выполняется с .pipe между .src и .dest.

Возьмем для примера следующий gulpfile.js.

// Include Gulp and the necessary plugins 
var gulp = require('gulp'),
    sass = require('gulp-sass'), 
    imagemin = require("gulp-imagemin"),
    cache = require("gulp-cache");  
// Task to compile SASS
gulp.task('sass', function() {     
    return gulp.src('scss/*.scss')         
    .pipe(sass())         
    .pipe(gulp.dest('dist/css')); 
}); 
// Task to minify images
gulp.task('images', function() {
    return gulp.src('images/**/*.+(png|jpg|gif|svg)')
    .pipe(cache(imagemin()))      
    .pipe(gulp.dest('dist/images'));
});

// Watching files for changes
gulp.task('watch', function() {     
    gulp.watch('scss/*.scss', ['sass']); 
    gulp.watch('images/**/*.+(png|jpg|gif|svg)', ['images']);
});
// Default task
gulp.task('default', ['sass', 'images', 'watch']);

Не волнуйтесь - это действительно так просто, как кажется, и мы сохраним его в этой статье! Тем не менее, Gulp позволяет нам «пачкать руки» сложностью, пока нам это нужно.

Хорошо, давайте разберем это на части.

Во-первых, нам требуется Gulp и все остальные плагины, которые необходимы для выполнения нашей задачи.

// Include Gulp and the necessary plugins 
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'), 
    uglify = require('gulp-uglify'), 
    rename = require('gulp-rename');

Теперь мы готовы к выполнению задач, давайте начнем с создания кода для компиляции и нашего кода SASS в CSS. Эта задача захватит любой .scss файл, расположенный в папке scss, скомпилирует его в CSS и сохранит в папке dist / css. Обратите внимание на использование методов .src и .dest и вызов плагина с использованием .pipe.

// Task to compile SASS
gulp.task('sass', function() {     
    return gulp.src('scss/*.scss')         
    .pipe(sass())         
    .pipe(gulp.dest('dist/css')); 
});

Теперь давайте определим задачу по уменьшению изображений. Это захватит любой файл с форматом .png, .jpg, .gif или .svg в любой папке внутри каталога images, проверит, был ли он уже кэширован (если да, он не будет передан ниже по потоку), и сохранит его. в папке dist / images.

// Task to minify images
gulp.task("images", function() {
    return gulp.src("images/**/*.+(png|jpg|gif|svg)")
    .pipe(cache(imagemin()))      
    .pipe(gulp.dest("dist/images"))
});

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

// Watching files for changes
gulp.task('watch', function() {     
    gulp.watch('scss/*.scss', ['sass']); 
    gulp.watch('images/**/*.+(png|jpg|gif|svg)', ['images']);
});

Наконец, мы определяем задачу по умолчанию для Gulp. Эта задача действует, когда мы запускаем команду gulp. В этом случае мы хотим, чтобы наша задача по умолчанию запускала задачи sass, images для обновления наших собранных файлов, а затем задачу watch в чтобы следить за изменениями файлов.

// Default task
gulp.task('default', ['sass', 'images', 'watch']);

Запуск Gulp

Отлично! Теперь Gulp готов к работе.

Мы можем либо запустить gulp, чтобы выполнить задачу по умолчанию, либо gulp [task], чтобы выполнить отдельную конкретную задачу.

Это очень простой способ использования Gulp, и он не раскрывает весь его потенциал (безусловно). Но это определенно стоит знать, поскольку он действительно может улучшить ваш рабочий процесс:

  • Он имеет огромную базу плагинов для бесконечного числа целей.
  • Конфигурация действительно проста и может быть адаптирована для использования в других проектах.
  • Упрощение !!

Если вы хотите увидеть немного того, что может предложить Gulp, взгляните на некоторые из самых невероятных плагинов, которые вы определенно не можете пропустить:

  • gulp-load-plugins загружает все необходимые плагины без использования оператора require.
  • Browsersync обновляет вашу страницу при каждом внесенном вами изменении.
  • sitepeed, очень полезно для тестирования производительности.
  • gulp-size, отображает размеры файлов.
  • gulp-plumber, обработка ошибок, чтобы остановить остановку Gulp при сбое.

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

Эксперименты с Gulp действительно заставили меня влюбиться в его простоту, и это то, что вы, возможно, ищете, как ученик. Я просто не могу этого рекомендовать.

Я очень надеюсь, что вы запачкаете руки, прочитав это. Вам это понравится.