Введение в Gulp.js

Наша задача также будет использовать потрясающий PostCSS через плагин gulp-postcss . PostCSS требует свой собственный набор плагинов, и мы установим эти:

• postcss-assets для управления активами. Это позволяет нам использовать такие свойства, как background: resolve('image.png'); разрешить пути к файлам или background: inline('image.png'); встроить данные закодированных изображений.
• автоматический префикс для автоматического добавления префиксов поставщиков в свойства CSS.
• css-mqpacker для упаковки нескольких ссылок на один и тот же медиа-запрос CSS в одно правило.
• cssnano для минимизации кода CSS при работе в производственном режиме.

Большинство из этих плагинов принимают параметры; обратитесь к их документации для получения дополнительной информации.

Наконец, исходная карта будет добавлена ​​в файл CSS при запуске в режиме разработки с использованием gulp-sourcemaps еще раз.

Установите все модули:

 npm install gulp-sass gulp-postcss postcss-assets autoprefixer css-mqpacker cssnano --save-dev 

Загрузите их в начало gulpfile.js :

 const ... sass = require('gulp-sass'), postcss = require('gulp-postcss'), assets = require('postcss-assets'), autoprefixer = require('autoprefixer'), mqpacker = require('css-mqpacker'), cssnano = require('cssnano'), 

Теперь мы можем экспортировать новую задачу css в конец gulpfile.js . Обратите внимание, что задача images установлена ​​как зависимость, потому что postcss-assets может ссылаться на изображения в процессе сборки:

 // CSS processing function css() { return gulp.src(src + 'scss/main.scss') .pipe(sourcemaps ? sourcemaps.init() : noop()) .pipe(sass({ outputStyle: 'nested', imagePath: '/images/', precision: 3, errLogToConsole: true }).on('error', sass.logError)) .pipe(postcss([ assets({ loadPaths: ['images/'] }), autoprefixer({ browsers: ['last 2 versions', '> 2%'] }), mqpacker, cssnano ])) .pipe(sourcemaps ? sourcemaps.write() : noop()) .pipe(gulp.dest(build + 'css/')); } exports.css = gulp.series(images, css); 

Обратите внимание, что .on('error', sass.logError) гарантирует, что Sass выводит синтаксические ошибки на консоль, не останавливая задачу Gulp.

Сохраните файл, добавьте соответствующие файлы Sass .scss и запустите задачу из командной строки:

 gulp css 

Шаг 6: Автоматизируйте задачи

Мы выполняли одну задачу за раз. Мы можем запустить их все одной командой, экспортировав задачу build в gulpfile.js :

 // run all tasks exports.build = gulp.parallel(exports.html, exports.css, exports.js); 

Метод gulp.parallel() выполняет задачи одновременно. Его можно комбинировать с gulp.series() для создания сложных цепочек зависимостей. В этом примере exports.html , exports.css и exports.js запускаются параллельно, но каждая из них может иметь последовательности зависимостей, включая задачу с images .

Сохраните и введите gulp build в командной строке, чтобы выполнить все задачи.

Это слишком много тяжелой работы? Gulp предлагает метод .watch() который может отслеживать исходные файлы и запускать соответствующую задачу при каждом изменении файла. Он передает набор файлов / папок для мониторинга, любые параметры (здесь не используются) и функцию задачи для запуска (необязательно в gulp.series() и / или gulp.parallel() ).

Давайте экспортируем новую задачу watch в конец gulpfile.js :

 // watch for file changes function watch(done) { // image changes gulp.watch(src + 'images/**/*', images); // html changes gulp.watch(src + 'html/**/*', html); // css changes gulp.watch(src + 'scss/**/*', css); // js changes gulp.watch(src + 'js/**/*', js); done(); } exports.watch = watch; 

Гулп должен знать, когда функция задачи завершена . Обычно это выполняется путем возврата потока Gulp, но при желании это может быть обещание JavaScript, источник событий, наблюдаемый, дочерний процесс или обратный вызов. Здесь мы используем колбэк с именем done() чтобы указать, что все задачи watch() были настроены.

Вместо немедленного запуска gulp watch давайте добавим задачу по умолчанию, которую можно выполнить, запустив gulp без дополнительных аргументов:

 // default task exports.default = gulp.series(exports.build, exports.watch); 

Сохраните gulpfile.js и введите gulpfile.js в командной строке. Ваши изображения, HTML, CSS и JavaScript будут обработаны, затем Gulp будет продолжать следить за обновлениями и при необходимости повторять выполнение задач. Нажмите Ctrl / Cmd + C, чтобы прервать мониторинг и вернуться в командную строку.

Шаг 7: Прибыль!

Другие плагины, которые вы можете найти полезными:

• gulp-load-plugins : загрузить все модули плагинов Gulp без обязательных объявлений
• gulp-preprocess : простой препроцесс HTML и JavaScript
• или без глотка : плагин препроцессора Less CSS
• gulp-stylus : плагин препроцессора Stylus CSS
• gulp-size : отображает размеры файлов и экономию
• gulp-nodemon : использует nodemon для автоматического перезапуска приложений Node.js при возникновении изменений

Задачи Gulp могут запускать любой код JavaScript или модули Node.js. Они не обязательно должны быть плагинами — например:

• синхронизация браузера : автоматически перезагружать ресурсы или обновлять ваш браузер, когда происходят изменения
• del : удалить файлы и папки (возможно, очищать папку build в начале каждого запуска)

Потратьте немного времени и Gulp может сэкономить много часов разочарований в разработке. Преимущества:

• плагины в изобилии
• конфигурация с использованием трубок легко читаема и понятна
• gulpfile.js можно адаптировать и использовать в других проектах
• Ваш общий вес страницы может быть уменьшен для повышения производительности
• Вы можете упростить ваше развертывание
• gulpfile.js — это весело (ну, интереснее, чем конфигурации JSON, используемые другими исполнителями задач)

Полезные ссылки:

• Домашняя страница Gulp
• Плагины Gulp
• домашняя страница нпм

Применение описанных выше процессов к простому веб-сайту уменьшило общий вес более чем на 50% и более. Вы можете проверить свои результаты, используя инструменты анализа веса страницы .

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