Ave $USER!

В этом Hello World я расскажу как использовать инструмент разработки Gulp в своих проектах. Рассмотрим установку, настройку и примеры использования. Хочешь разобраться с Gulp, читай далее.

Для чего нужен Gulp?

Gulp - это планировщик задач. Что это значит? Например, у нас есть директория src где ведется разработка проекта и директория build, куда проект собирается и необходимо выполнить следующие задачи при сборке проекта:

• очистить директорию сборки
• скопировать все css файлы, кроме *.dev.css, в css директорию сборки, после ее очистки
• скопировать все js файлы, кроме *.dev.js, в js директорию сборки, после ее очистки
• скопировать все картинки из директории images, в images директорию сборки, после ее очистки
• скопировать все html, в корень директории сборки, после ее очистки

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

Установка и настройка Gulp

Что бы установить, настроить, а позже исползовать Gulp, необходимо установить его глобально

npm i -g gulp

и локально в проект

npm i --save-dev gulp

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

const gulp = require('gulp');

gulp.task('task-1', completeCallback => {
    // Some task-1 code
});

//await while task-1 finished
gulp.task('task-2', ['task-1'], completeCallback => {
    // Some task-2 code
});

gulp.task('default', ['task-1', 'task-2']);

Для выполнения конкретной задачи, необходимо выполнить команду:

gulp [task-name]

Для выполнения задачи по умолчанию, [task-name] не указывается.

От теории к практике

Давайте рассмотрим на примере задач, которые я привел выше. Для этого установим дополнительный модуль, для удаления файлов по glob маске

npm i --save-dev del

Конфигурационный файл gulpfile.js примет следующий вид

const gulp = require('gulp');
const del = require('del');

// Build directory clean task
gulp.task('clean', cb => {
    return del('./build', cb);
});
// Copy css files to css build directory except *.dev.css after clean task
gulp.task('css-copy', ['clean'], function() {
    return gulp.src(['./src/css/**/*.css', '!./src/css/**/*.dev.css'])
        .pipe(gulp.dest('./build/css'));
});
// Copy js files to js build directory except *.dev.js after clean task
gulp.task('js-copy', ['clean'], function() {
    return gulp.src(['./src/js/**/*.js', '!./src/css/**/*.dev.js'])
        .pipe(gulp.dest('./build/js'));
});
// Copy all files from images directory to images build directory after clean task
gulp.task('images-copy', ['clean'], function() {
    return gulp.src(['./src/images/*.*'])
        .pipe(gulp.dest('./build/images'));
});
// Copy all html files to html build directory after clean task
gulp.task('html-copy', ['clean'], function() {
    return gulp.src(['./src/*.html'])
        .pipe(gulp.dest('./build'));
});
// Default task for execute all tasks in single one
gulp.task('default', ['clean', 'css-copy', 'js-copy', 'images-copy', 'html-copy']);

Теперь запустив команду

gulp

проект будет полностью собран в директорию сборки.