
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
проект будет полностью собран в директорию сборки.