Как использовать Gulp.js для автоматизации ваших задач CSS

 /**************** server task (private) ****************/ const syncConfig = { server: { baseDir : './', index : 'index.html' }, port : 8000, open : false }; // browser-sync function server(done) { if (browsersync) browsersync.init(syncConfig); done(); } /**************** watch task ****************/ function watch(done) { // image changes gulp.watch(imgConfig.src, images); // CSS changes gulp.watch(cssConfig.watch, css); done(); } /**************** default task ****************/ exports.default = gulp.series(exports.css, watch, server); 

Параметры конфигурации синхронизации браузера определены в syncConfig , который устанавливает такие параметры , как порт и файл по умолчанию.

Функция server инициирует Browsersync, и done() обратный вызов done() поэтому Gulp знает, что он завершен.

Browsersync может сам следить за изменениями файлов, но в этом случае мы хотим контролировать его через Gulp, чтобы обновления происходили только тогда, когда изменение Sass вызывает перестройку main.css .

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

Наконец, создается задание по умолчанию, которое можно выполнить, запустив gulp без аргументов. Он вызывает задачу css (которая также запускает images() ) для создания всех файлов, запускает функцию watch() для мониторинга обновлений и запускает сервер Browsersync.

Сохраните gulpfile.js и запустите задачу по умолчанию из командной строки:

 gulp 

Терминал покажет журнал, но, в отличие от ранее, он не прекратит работу и продолжит работу:

 Gulp development build [14:32:05] Using gulpfile /gulp4-css/gulpfile.js [14:32:05] Starting 'default'... [14:32:05] Starting 'images'... [14:32:05] gulp-imagemin: Minified 0 images [14:32:05] Finished 'images' after 64 ms [14:32:05] Starting 'css'... [14:32:05] main.css 9.78 kB [14:32:05] Finished 'css' after 843 ms [14:32:05] Starting 'watch'... [14:32:05] Finished 'watch' after 33 ms [14:32:05] Starting 'server'... [14:32:06] Finished 'server' after 19 ms [14:32:06] Finished 'default' after 967 ms [Browsersync] Access URLs: ------------------------------------- Local: http://localhost:8000 External: http://192.168.1.234:8000 ------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ------------------------------------- [Browsersync] Serving files from: ./ 

На вашем ПК теперь работает веб-сервер с http://localhost:8000 . Другие устройства в сети могут подключаться к внешнему URL. Откройте URL-адрес в браузере или два, затем внесите изменения в любой файл .scss . Результаты немедленно обновляются.

Изучите любой элемент в devtools, и на панели « Стили» отобразится местоположение предварительно скомпилированного кода Sass. Вы можете нажать на имя файла, чтобы просмотреть полный источник:

Наконец, нажмите Ctrl + C, чтобы остановить задачу Gulp, запущенную в вашем терминале.

Код живого производства

NODE_ENV среды NODE_ENV должна быть установлена ​​в NODE_ENV чтобы задачи Gulp знали, когда создавать окончательный код, и отключить генерацию исходной карты. На терминалах Linux и MacOS:

 NODE_ENV=production 

Windows Powershell:

 $env:NODE_ENV="production" 

Устаревшая командная строка Windows:

 set NODE_ENV=production 

Вы также можете:

1. Установите Gulp и запускайте задачи прямо на живом сервере. В идеале NODE_ENV должен быть постоянно установлен на NODE_ENV машинах путем изменения сценария запуска. Например, добавьте export NODE_ENV=production в конец файла Linux ~/.bashrc .
2. Создайте производственный код локально, затем загрузите его на действующие серверы.

Запустите gulp css для генерации окончательного кода.

Чтобы вернуться в режим разработки, измените NODE_ENV на development или пустую строку.

Следующие шаги

Эта статья демонстрирует возможный рабочий процесс Gulp CSS, но он может быть адаптирован для любого проекта:

• Существует более 3700 плагинов Gulp . Многие помогают с CSS, но вы найдете другие для HTML, шаблонов, обработки изображений, JavaScript, серверных языков, linting и многого другого.
• Существуют сотни плагинов PostCSS, и вы можете написать свой собственный .

Какой бы инструмент вы ни выбрали, я рекомендую вам:

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

Код выше доступен на GitHub, и вы можете просмотреть всю конфигурацию gulpfile.js . Пожалуйста, используйте его как хотите.