Отже, в цій частині я зосереджуся в основному на деяких плагінах та інструментах, які можуть бути дуже важливими та корисними для будь-якого розробника, і допомагають організувати файл gulpfile.js.
gulp-BrowserSync
У попередньому розділі ми бачили, як можна використовувати browserSync для автоматичного перезавантаження нашої програми. Але, як випливає з назви, browserSync більше пов'язаний із синхронізацією програми.
Коли ви запускаєте програму через gulp, у командному рядку ви повинні побачити таку реакцію у відповідь або щось подібне від browserSync:
<code>Local: http://localhost:9091 External: http://172.28.64.208:9091
Авто-завантаження з gulp-load-plugins
Почнемо з цього. Потрібні плагіни при написанні автоматизованих завдань можуть стати дуже важкими щодо кількості require, які ви повинні додати. За допомогою цього плагіна ви можете просто попросити gulp автоматично увімкнути всі завдання. І можете запитати мене, як отримати доступ до імен плагінів, тому що всі ці імена вам знадобляться пізніше. Так, ви маєте рацію, gulp-load-plugins бере на себе турботу з автоматичного створення імен на основі імені пакета у форматі CamelCase і зберігає їх в об'єкт, до якого ви можете легко отримати доступ. Використовуємо gulp-load-plugins для цього прикладу:
<code data-language="javascript">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.
<code data-language="javascript">gulp.src(paths.sass) . pipe(sass()) .pipe(autoprefixer()) .pipe(minifycss()) .pipe(rename({suffix: '.min'})); Об'єднання з gulp-concat
Подобно плагіну gulp-rename, gulp-concat ще один престижний плагін, який відповідає за уніфікацію, злиття або просто поєднання ваших JavaScript-файлів.
<code data-language="javascript">.pipe(concat('temp.js')) .pipe(uglify()) .pipe(rename('final.min.js')) .pipe(gulp.dest('./app/js/')) gulp-plumber
Plumber це чудовий плагін, який захищає ваші завдання від зупинки під час їх виконання при виникненні помилки. Для використання ви повинні просто пропустити кожне завдання через плагін подібно до наступного прикладу:
<code data-language="javascript">gulp.src(path.files). gulp.dest(path.dest));
gulp-unCSS
Мій улюблений. Це справді благословення, що є така плагін. Він дбає про ваш невикористаний CSS, дозволяючи різко зменшити вагу стилів, особливо якщо ви працюєте з фреймворком на зразок Bootstrap. Подивіться, як ви можете його використовувати:
<code data-language="javascript">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:
<code data-language="javascript">return gulp.src('path/to/images'/*.{png,jpg,jpeg,gif,svg }') .pipe(imagemin()); gulp-rev
Відмінний плагін, який допомагає перевірити код до його публікації.
<code data-language="javascript">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 на основі цих вказівок:
<code data-language="javascript">//////////////////////////////////////////////////////ЗРАЗОК 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'])); .watch(config.html, ['html']); }); /////////////////////////////////////////////////////Завдання за замовчуванням ////////////////////////////////////////////////gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']); Файл .gitignore
Я хотів згадати про це, тому що коли ви дивитесь всередину папки node_modules, ви можете побачити, що вона містить купу важких файлів і папок, я маю на увазі дійсно важких, і ви не хочете витрачати весь день, намагаючись скопіювати їх при розгортанні або даючи проект комусь іншому. Ви також не бажаєте відслідковувати їх через Git, тому що у вас вже є файл package.json і ви завжди можете отримати їх назад.
Таким чином, щоб запобігти цьому, використовуйте файл .gitignore, через який ви можете заборонити відстеження деяких папок та файлів. Файл може бути чимось на зразок цього:
<code>## Build Systems node_modules/bower_components/.sass-cache *.css.map build/dist/
Резюме
Як я вже говорив, світ Gulp складний і різноманітний. Те, що я сказав, може вимовити хтось інакше, і це, як і раніше, буде працювати. Насамперед, ви повинні завжди розглядати контекст та вимоги свого проекту. Ви можете побачити величезний проект з дуже маленьким gulpfile або навпаки.Я думаю, що ідеально підходящою технікою є та, яка працює для вас та задовольняє вашим вимогам.