Итак, в этой части я сосредоточусь в основном на некоторых плагинах и инструментах, которые могут быть очень важны и полезны для любого разработчика, и помогают организовать файл gulpfile.js.
В предыдущем разделе мы видели, как можно использовать browserSync для автоматической перезагрузки нашего приложения. Но, как следует из названия, browserSync больше связан с синхронизацией приложения.
Когда вы запускаете приложение через gulp, в командной строке вы должны увидеть такую ответную реакцию или что-то подобное от browserSync:
Local: http://localhost:9091
External: http://172.28.64.208:9091
Начнём с этого. Требуемые плагины при написании автоматизированных задач могут стать очень тяжёлыми в плане количества require, которые вы должны добавить. С помощью этого плагина вы можете просто попросить gulp автоматически включить все задачи. И можете спросить меня, как получить доступ к именам плагинов, потому что все эти имена вам потребуются позже. Да, вы правы, gulp-load-plugins берёт на себя заботу по автоматическому созданию имён на основе имени пакета в формате CamelCase и сохраняет их в объект, к которому вы можете легко получить доступ. Используем gulp-load-plugins для этого примера:
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
// Объект содержит имена плагинов
var plugins = gulpLoadPlugins();
gulp.task('css', function(){
return gulp.src('path/to/source')
.pipe(plugins.gulpMinifyCss('main.js'))
});
У вас есть возможность настроить плагин.
Этот плагин реально хорош в переименовании файлов. Например, в разработке у вас есть CSS и JS-файлы с именами styles.css и main.js. После их минимизации можно использовать gulp-rename и переименовать файлы в styles.min.css и main.min.js.
gulp.src(paths.sass)
.pipe(sass())
.pipe(autoprefixer())
.pipe(minifycss())
.pipe(rename({suffix: '.min'}));
Подобно плагину gulp-rename, gulp-concat ещё один престижный плагин, который отвечает за унификацию, слияние или просто объединение ваших JavaScript-файлов.
.pipe(concat('temp.js'))
.pipe(uglify())
.pipe(rename('final.min.js'))
.pipe(gulp.dest('./app/js/'))
Plumber это великолепный плагин, который предохраняет ваши задачи от остановки во время их выполнения при возникновении ошибки. Для использования вы должны просто пропустить каждую задачу через плагин подобно следующему примеру:
gulp.src(path.files)
.pipe(plumber()),
.pipe(gulp.dest(path.dest));
Мой любимый. Это действительно благословение, что есть такой плагин. Он заботится о вашем неиспользованном CSS, позволяя резко уменьшить вес стилей, особенно если вы работаете с фреймворком вроде Bootstrap. Посмотрите, как вы можете его использовать:
return gulp.src('path/to/css/sources')
.pipe(sass())
.pipe(autoprefixer())
.pipe(uncss({
html: ['index.html', 'posts/**/*.html', 'http://example.com']
}))
.pipe(rename({
suffix: '.min'
}))
Этот плагин поможет вам, оптимизируя изображения. Очень прост в использовании.
Пример для оптимизации .png, .jpg, . jpeg, .gif, .svg:
return gulp.src('path/to/images'/*.{png,jpg,jpeg,gif,svg}')
.pipe(imagemin());
Отличный плагин, который помогает проверить код до его публикации.
gulp.task('rev', ['less', 'scripts'], function() {
return gulp.src(['dist/**/*.css', 'dist/**/*.js'])
.pipe(rev())
.pipe(gulp.dest('dist'));
});
Critical CSS ещё один отличный плагин. Его ролью является внедрение любого требуемого CSS и JavaScript, чтобы помочь загрузить ваш контент до «сгиба» без блокировки. Это может показаться странным, но это проблема. Вы, возможно, знаете Google Insights PageSpeed, который помогает определить скорость веб-страниц для десктопа и мобильных устройств.
Javascript и CSS замедляет загрузку страниц и Google предполагает, что всё до «сгиба» должно загружаться немедленно. Вот где Critical CSS вступает в игру. Он внедрит все необходимые CSS в ваши HTML-теги, что даст вам некоторые встроенные стили. У этого подхода есть некоторые преимущества, вроде ускорения времени загрузки.
Я на деле ещё не убеждён в его использовании и до сих пор думаю, что могу получить другие альтернативы для решения проблемы. Так что я не буду его описывать, вы можете по-прежнему перейти на эту страницу и я действительно рекомендую вам посмотреть это видео Патрика Хаманна (The Guardian), если вы действительно желаете увидеть, как люди пользуются такой практикой.
Другие плагины
Есть и некоторые другие плагины, вам также может быть интересно взглянуть на такие как: gulp-html-extend, autoprefixer, gulp-iconfont, gulp-sourcemaps, gulp-util.
Мы рассмотрели некоторые из них. Но многие другие плагины могут добавить некоторой функциональности вашим проектам.
Настройки проекта
Мы прошли через множество плагинов и все рады этому. Слава богу!
Другая вещь, которую вы также должны рассмотреть при работе с Gulp — это организация ваших задач в рамках файла gulpfile.js, которая предполагает, как называть задачи, будет ли задача для слежения за файлами или нет, какая задача будет выполняться в производстве или до него и т. д.
Итак, давайте посмотрим на это быстро с пошаговым объяснением ниже.
Обратите внимание, что эти шаги не являются стандартом, которому вы должны следовать, это просто нечто, что я делаю и вижу, как некоторые другие разработчики делают тоже.
- Начните с подключения всех необходимых плагинов; используйте одну функцию require(), разделяя имена запятыми или воспользуйтесь gulp-load-plugins.
- Определите переменные для хранения путей к местоположению ваших файлов.
- Определите задачу для CSS.
- Определите задачу для скриптов.
- Определите задачу для HTML.
- Определите задачу для изображений.
- Определите любую задачу для синхронизации, вроде browserSync.
- Определите необходимую задачу для очистки.
- Определите задачу сборки.
- Определите задачу для слежения за файлами.
- Определить задачу по умолчанию default.
- Всегда старайтесь добавлять блок комментария перед каждым шагом, чтобы пояснить, что он делает.
Давайте создадим образец gulpfile.js на основе этих указаний:
// ////////////////////////////////////////////////
//
// ОБРАЗЕЦ GULPFILE.JS
// Подробный комментарий...
// // /////////////////////////////////////////////
// ////////////////////////////////////////////////
//
// Требуемые плагины
//
// // /////////////////////////////////////////////
var gulp = require('gulp'),
plugin1 = require('gulp-plugin1'),
plugin2 = require('gulp-plugin2'),
plugin3 = require('gulp-plugin3');
// ////////////////////////////////////////////////
//
// Создание переменных конфигурации
//
// ////////////////////////////////////////////////
var config = {
html: [
'path/to/html/files'
],
scss:[
'path/to/scss/files'
],
scripts:[
'path/to/script/files'
]
};
// ////////////////////////////////////////////////
//
// Задачи для стилей
//
// ///////////////////////////////////////////////
gulp.task('styles', function() {
gulp.src(config.scss)
.pipe( ... )
. ...
;
});
// ////////////////////////////////////////////////
//
// Задачи для скриптов
//
// ///////////////////////////////////////////////
gulp.task('scripts', function() {
return gulp.src(config.scripts)
.pipe( ... )
. ...
;
});
// ////////////////////////////////////////////////
//
// Задачи для HTML
//
// // /////////////////////////////////////////////
gulp.task('html', function(){
gulp.src(config.html)
.pipe( ... )
. ...
;
});
// ////////////////////////////////////////////////
//
// Задачи для изображений
//
// // /////////////////////////////////////////////
gulp.task('images', function() {
return gulp.src(config.images)
.pipe(cache(imagemin()))
. ...
;
});
// ////////////////////////////////////////////////
//
// Задачи Browser-Sync
//
// // /////////////////////////////////////////////
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./app/"
}
});
});
// ////////////////////////////////////////////////
//
// Задачи для очистки
//
// // /////////////////////////////////////////////
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
.pipe(clean());
});
// ////////////////////////////////////////////////
//
// Задачи сборки
//
// // /////////////////////////////////////////////
// задача запускает сервер для тестирования финального приложения
gulp.task('build:serve', function() {
browserSync({
server: {
baseDir: "./build/"
}
});
});
// задача создаёт папку build для всех файлов
gulp.task('build:create', function(){
//...
});
// задача удаляет ненужные файлы из папки build
gulp.task('build:remove', function () {
// ...
);
// задача для запуска сборки
gulp.task('build', ['build:create', 'build:remove']);
// ////////////////////////////////////////////////
//
// Задача watch
//
// // /////////////////////////////////////////////
gulp.task ('watch', function(){
gulp.watch(config.scss, ['styles']);
gulp.watch(config.scripts, ['scripts']);
gulp.watch(config.html, ['html']);
});
// ////////////////////////////////////////////////
//
// Задача по умолчанию
//
// // /////////////////////////////////////////////
gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']);
Файл .gitignore
Я хотел упомянуть об этом, потому что когда вы смотрите внутрь папки node_modules, вы можете увидеть, что она содержит кучу тяжёлых файлов и папок, я имею в виду действительно тяжелых, и вы не хотите тратить весь день, пытаясь скопировать их при развёртывании или давая проект кому-то другому. Вы также не желаете отслеживать их через Git, так как у вас уже есть файл package.json и вы всегда можете получить их обратно.
Таким образом, чтобы предотвратить это, используйте файл .gitignore, через который вы можете запретить отслеживание некоторых папок и файлов. Файл может быть чем-то вроде этого:
## Build Systems
node_modules/
bower_components/
.sass-cache
*.css.map
build/
dist/
Резюме
Как я уже говорил, мир Gulp сложен и многообразен. То, что я сказал, может произнести кто-то иной другими словами и это по-прежнему будет работать. Прежде всего, вы должны всегда рассматривать контекст и требования своего проекта. Вы можете увидеть огромный проект с очень маленьким gulpfile или наоборот. Я думаю, что идеально подходящей техникой является та, которая работает для вас и удовлетворяет вашим требованиям.