Рекомендуемые плагины

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

gulp-BrowserSync

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

Когда вы запускаете приложение через gulp, в командной строке вы должны увидеть такую ответную реакцию или что-то подобное от browserSync:

Local: http://localhost:9091
External: http://172.28.64.208:9091

Авто-загрузка с gulp-load-plugins

Начнём с этого. Требуемые плагины при написании автоматизированных задач могут стать очень тяжёлыми в плане количества 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'))
});

У вас есть возможность настроить плагин.

gulp-rename

Этот плагин реально хорош в переименовании файлов. Например, в разработке у вас есть 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-concat

Подобно плагину gulp-rename, gulp-concat ещё один престижный плагин, который отвечает за унификацию, слияние или просто объединение ваших JavaScript-файлов.

.pipe(concat('temp.js'))
  .pipe(uglify())
  .pipe(rename('final.min.js'))
  .pipe(gulp.dest('./app/js/'))

gulp-plumber

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

gulp.src(path.files)
  .pipe(plumber()),
  .pipe(gulp.dest(path.dest));

gulp-unCSS

Мой любимый. Это действительно благословение, что есть такой плагин. Он заботится о вашем неиспользованном 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'
  }))

gulp-imagemin

Этот плагин поможет вам, оптимизируя изображения. Очень прост в использовании.

Пример для оптимизации .png, .jpg, . jpeg, .gif, .svg:

return gulp.src('path/to/images'/*.{png,jpg,jpeg,gif,svg}')
  .pipe(imagemin());

gulp-rev

Отличный плагин, который помогает проверить код до его публикации.

gulp.task('rev', ['less', 'scripts'], function() {
  return gulp.src(['dist/**/*.css', 'dist/**/*.js'])
    .pipe(rev())
    .pipe(gulp.dest('dist'));
});

Critical CSS

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 или наоборот. Я думаю, что идеально подходящей техникой является та, которая работает для вас и удовлетворяет вашим требованиям.

Автор: Ахмед Салифу Амиду
Последнее изменение: 27.02.2024