Подготовка проекта к запуску

Предполагается, что GIT и Node.js уже установлены на вашей машине глобально. Если нет, то скачиваем и выполняем установку. Все команды необходимо набирать в консоли, находясь в корневой папке проекта.

Выполняем из консоли следующую команду (точка в конце обязательна):

> git clone https://github.com/gitolog/ss-gulp-modules.git .

При этом в корень проекта будут скопированы файлы gulpfile.js и package.json,необходимые для дальнейшей установки.

1. Устанавливаем Gulp

Если Gulp уже установлен, этот пункт можно пропустить.

> npm install -g gulp

Ключ -g говорит о том, что устанавливается системно.

2. Устанавливаем необходимые модули Gulp

> npm install --save-dev

Будут установлены модули, перечисленые в файле package.json:

• gulp - Собственно сам планировщик. Будет установлен локально в проект (, так надо)
• del - Модуль Node.js для удаления файлов и папок
• gulp-autoprefixer - CSS-постпроцессор. Автоматически добавляет необходимые вендорные префиксы CSS используя сервис CanIUse.com
• gulp-concat - Плагин для слияния файлов
• gulp-convert-encoding - плагин для перекодировки файлов
• gulp-imagemin - Плагин для минификации PNG, JPEG, GIF, SVG
• gulp-less - Компилятор CSS-препроцессора LESS
• gulp-load-plugins - Менеджер установленных плагинов Gulp
• gulp-minify-css - Плагин для минификации CSS
• gulp-minify-html - Плагин для минификации HTML
• gulp-notify - Плагин для вывода сообщений в консоль
• gulp-rename - Плагин для переименования файлов
• gulp-uglify - Плагин для минификации JS-файлов
• run-sequence - Плагин позволяет запускать задачи в любой последовательности как асинхронно, так и синхронно

2. Запуск задач Gulp

Выполняемые задачи описаны в файле gulpfile.js

Задача слияния всех CSS

> gulp compile:css

Будут взяты все файлы LESS и CSS из папки /www/css/src, скомпилированы, объединены в один файл и помещены в /www/css/style.css.

Задача сжатия CSS

> gulp minify:css

Все файлы *.css в папке /www/css будут сжаты и сохранены в эту же папку под своими именами с добавлением суффикса .min Уже сжатые файлы обрабатываться не будут.

Задача слияния всех JS

> gulp compile:js

Будут взяты все JS-файлы (сперва основные вендорные зависимости) из папки /www/javascript/src, скомпилированы, объединены в один файл и помещены в /www/javascript/common.js

Задача сжатия JS

> gulp minify:js

Файл common.js в папке /www/javascript будет сжат и сохранен в эту же папку под своим именем с добавлением суффикса .min

Задача сжатия IMAGES

> gulp minify:images

Будут взяты все картинки (JPG, GIF, PNG) из папки /www/images/src, минифицированы и помещены в /www/images

Сборка и сжатие всего сразу

> gulp build

Будет выполнены все предыдущие задачи одним махом (компиляция и сжатие CSS, JS и изображений)

Удаление сборки

> gulp clean

Будут удалены: /www/css/style.css, /www/css/style.min.css, /www/javascript/common.js, /www/javascript/common.min.js

Слежение за изменениями

> gulp

Будет удалена предыдущая сборка, выполнится новая компиляция стилей, скриптов и картинок. При внесении изменений в стили или скрипты будет происходить их компиляция "на лету".

Также, при любых изменениях скриптов, стилей или шаблонов *.ftl, будет происходить авто-обновление окна браузера.

Live reload окна браузера

Для автоматического обновления окна браузера во время редактирования скриптов, стилей и шаблонов необходимо установить плагин LiveReload:

[Плагин для Google Chrome] (https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)

[Плагин для Mozilla Firefox] (https://github.com/downloads/siasia/livereload-extensions/LiveReload-2.0.9.xpi)