Gulppack. Версия с SCSS

Особенности

• сборка для автоматизации задач в повседневной front-end разработке;
• автоматическая перезагрузка страницы в браузере с использованием browser-sync;
• использование транспайлера Babel для поддержки современного JavaScript (ES6) в браузерах.

Установка

Установите Yarn.

Yarn - это современная альтернатива npm. Yarn работает с тем же файлом package.json и так же скачивает необходимые модули в папку node_modules, но делает это намного быстрее.

• скачайте сборку: git clone https://github.com/andreyalexeich/gulppack-scss.git;
• установите gulp глобально: yarn global add gulp-cli;
• перейдите в скачанную папку со сборкой: cd gulppack-scss;
• введите команду, которая скачает необходимые компоненты для корректной работы нашей сборки, указанные в файле package.json: yarn;
• введите команду: yarn run dev (режим разработки);
• чтобы окончательно завершить проект, введите команду yarn run build.

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером и работающим browser-sync.

Плагины

• gulp-if - запуск заданий только тогда, когда это нужно;
• browser-sync - живая перезагрузка веб-страницы при внесении изменений в файлы вашего проекта;
• browserify - позволяет использовать require в браузере;
• gulp-autoprefixer — автоматически расставляет вендорные префиксы в CSS в соответствии с сервисом Can I Use;
• gulp-babel - использование ES6 с Babel;
• gulp-uglify — минификация JS-файлов;
• gulp-sass — компиляция SCSS в CSS;
• gulp-clean-css — минификация CSS-файлов;
• gulp-sourcemaps - карта стилей;
• gulp-rename — переименование файлов, добавление суффиксов и префиксов (например, добавление суффикса .min к минифицированным файлам);
• gulp-imagemin — сжатие изображений PNG, JPG, GIF и SVG (включая дополнительные плагины для оптимизации);
• gulp-favicons — генератор фавиконок для вашего проекта;
• gulp-svg-sprites — создание SVG-спрайтов;
• gulp-replace - замена строк;
• gulp-rigger - позволяет вставлять содержимое из отдельных файлов в основной;
• gulp-plumber — оповещения в командной строке (например, ошибки в SCSS/Sass);
• gulp-debug — отладка в терминале;
• gulp-watch — отслеживание изменений в ваших файлах проекта;
• gulp-clean — удаление файлов и папок;
• yargs - получение аргументов командной строки в Node.js.

Режим разработки

Исходники

• HTML-файлы находятся в папке src/views
  • компоненты (например, спрайты или формы) к HTML-файлам находятся в src/views/components
  • остальные компоненты (например, шапка, футер) могут находиться в src/views/layouts
• SCSS-файлы находятся в папке src/styles
  • основные компоненты (типография, переменные, миксины) к SCSS-файлам находятся в src/styles/base
  • компоненты (например, спрайты, кнопки) находятся в src/styles/components
  • остальные компоненты (от других разработчиков) находятся в src/styles/vendor
• JS-файлы находятся в папке src/js
• Изображения находятся в папке src/img
  • векторные изображения для создания спрайтов находятся в src/img/icons/svg
  • единичное изображение для генерации фавиконок находится в src/img/icons/favicon.png (данное изображение может иметь формат .jpg, .png или .gif)

Сборка проекта в режиме разработки

yarn run dev

Окончательная сборка

yarn run build

Готовые файлы

• HTML-файлы находятся в папке dist/;
• минифицированные CSS-файлы находятся в папке dist/styles;
• минифицированные JS-файлы с поддержкой ES6 находятся в папке dist/js;
• сжатые изображения находятся в папке dist/img.

Bower?

Вместо Bower используйте Yarn или NPM вместе с Browserify. Например, чтобы подключить jQuery и итог вместе с Вашим кодом собрать в бандл, необходимо перед запуском yarn run dev или yarn run build:

• скачать библиотеку: yarn add jquery;
• в src/js/main.js написать:

const $ = require("../../node_modules/jquery/dist/jquery");

$(document).ready(function() {
	$("body").css({background: "#ececec"});
});

В результате вы получите последнюю версию jQuery из NPM, которая будет скачана в папку node_modules в корневой директории проекта. Объект jQuery экспортируется в локальную переменную const $ вместо глобальной в window, что особо удобно, если скрипт должен работать на сторонних сайтах, где уже может быть (или не быть) установлен jQuery другой версии.

Нужен Pug + SCSS?

Используйте эту сборку.