- сборка для автоматизации задач в повседневной 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
- компоненты (например, спрайты или формы) к HTML-файлам находятся в
- SCSS-файлы находятся в папке
src/styles
- основные компоненты (типография, переменные, миксины) к SCSS-файлам находятся в
src/styles/base
- компоненты (например, спрайты, кнопки) находятся в
src/styles/components
- остальные компоненты (от других разработчиков) находятся в
src/styles/vendor
- основные компоненты (типография, переменные, миксины) к SCSS-файлам находятся в
- 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 используйте 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
другой версии.
Используйте эту сборку.