Базовый шаблон проекта на Gulp

Шаблоном для начала работ над frontend проектами

Перед началом работы

Для работы шаблона необходимо установить nodejs (вместе с npm)

• Установка Nodejs

Установка шаблона

$ git clone https://github.com/tsergeytovarov/grunt-project.git project-name
$ cd project-name
$ npm install

По окончанию выполнения будут установлены все необходимые пакеты.

Задачи Gulp

• $ gulp js - сборка JS
• $ gulp less - компилиция LESS
• $ gulp fonts - копирование шрифтов
• $ gulp clean - очистка каталога build/
• $ gulp webserver - запуск локального веб-сервера для livereload
• $ gulp build - полная сборка проекта
• $ gulp watch - запуск задачи webserver и отслеживания изменений
• $ gulp default - запуск задачи watch

Общая концепция

• src/ - каталог для размещения рабочих файлов (html, less, js, изображения)
• build/ - каталог для размещения готовой верстки
• design/ - каталог для локального хранения файлов макета.

Вся работа осуществляется в каталоге src/.

Концепции работы

Компиляция Less

Задача $ gulp less

Файл src/css/style.less является диспетчером подключений для всех прочих less-файлов.

Организация файлов проекта осуществляется по методологии MCSS.

При компиляции происходит объединение всех файлов, компиляция в CSS, форматирование стиля кодирования, добавление вендорных префиксов, минификация и запись sourcemaps. Итоговые файлы стилевых таблиц помещаются в каталог build/css (style.css, style.min.css, style.min.css.map)

Компиляция JavaScript

Задача $ gulp js

Файл src/js/vendor.js содержит все сторонние библиотеки и фреймворки. jQuery вшит автоматически.
Файл src/js/custom.js для написания собственных стилей.

При компиляции происходит объединение всех файлов, проверка на наличие ошибок (при этом исключаются из проверки файлы сторонних библиотек и проверяются только те, что написаны нами), минификация и запись sourcemaps. Итоговый файл помещается в каталог build/js (main.js, main.min.js, main.min.js.map)

Обработка файлов шрифтов

Задача $ gulp fonts

При обработке шрифты будут скопированы в каталог build/css/fonts.

Очистка каталога сборки

Задача $ gulp clean

При выполнении задачи полностью удаляется содержимое каталога build/ за исключением файла build/.gitignore

Полная сборка проекта

Задача $ gulp build

При запуске задачи последовательно выполняются задачи clean, html, js, less, fonts.

В итоге выполнения в каталоге build/ формируется полная сборка проекта.

Livereload и синхронизация между браузерами

Задача $ gulp webserver

При выполнении задачи запускается локальный веб-сервер BrowserSync и открыватся index.html проекта.

Подробнее о BrowserSync

Сервер использует каталог build/ в качестве корня проекта.

Отслеживание изменений

Задача $ gulp watch

При запуске сначала выполняется задача $ gulp webserver, затем при изменении или добавлении в каталоге src/ каких
либо файлов, автоматически запускается соответсвующая задача по их обработке.