Стартовый набор для верстки (Gulp 4.0)

Клонируем в текущую папку (точка в конце через пробел):

$ git clone git@github.com:eveness/gulp.git .

Избавляемся от привязки к удаленному репозиторию:

git remote rm origin

Ставим зависимости:

npm install

Настройка

Редактируем конфиг settings.json

{
	"PATH_PUBLIC": "public/",
	"PATH": "/",
	"PATH_IN_CSS": "/",
	"SRCMAP": false,
	"JQUERY": {
		"enabled": false,
		"version": "1.12.4"
	}
}

• PATH_PUBLIC - путь к папке с собранной в конечном итоге версткой, по умолчанию public (не забывать про / в конце).

• PATH - путь к файлам js и css в html. По умолчанию это абсолютный путь, но при публикации верстки в какой-нибудь папке может понадобиться изменить этот путь на относительный, тогда значение нужно установить как пустую строку "".

• PATH_IN_CSS - путь к изображениям и шрифтам в css. По умолчанию это абсолютный путь, но при публикации верстки в какой-нибудь папке может понадобиться изменить этот путь на относительный, тогда значение нужно установить как "../", в соответствии со структурой относительно файла стилей. При инициализации создается файл less/path.less с переменной @path с заданным тут значением, которую затем и нужно использовать в стилях для путей.

• SRCMAP - генерировать или нет sourcemap в файле со стилем. В разработке полезно, на продакшене не принято (лишний вес).

• JQUERY.enabled - если будет использоваться jQuery, то значение выставить в true, тогда при инициализации библиотека будет установлена в node_modules, а минифицированная версия скопирована в папку public/js/vendor. Если значение true, то в футер добавляется блок для подключения (html/templates/jquery.html). В этом же блоке, если нужно, отредактировать локальное расположение библиотеки.

• JQUERY.version - какую версию jQuery использовать. Версия подставляется при установке (через npm install) и в блоке html/templates/jquery.html для подключения через CDN.

Редактируем конфиг deploy.example.json

В этом файле хранятся настройки для подключения по FTP и загрузки файлов css, js и rev-manifest.json таском deploy. Отредактированный файл сохранить как deploy.json. Если ничего такого не надо, просто сохранить deploy.json с такими же данными.

{
	"host": "localhost",
	"user": "ftp",
	"password": "ftp",
	"folder": "/public_html",
	"local": "deploy"
}

• folder - папка с сайтом на сервере.

• local - локальная папка, где будет храниться rev-manifest.json с предыдущими версиями css и js файлов.

Редактируем конфиг package.json

Правим название проекта, версию и ссылку на репозиторий. Добавляем необходимые поля или забиваем :)

Инициализация

После внесения изменений в settings.json и прочие файлы, выполнить:

gulp init

Таск установит jQuery (если нужно), соберет файлы в папку public (или иную, если изменено в settings.json), и, создаст файл rev-manifest.json, что необходимо для дальнейшего отслеживания изменений и удаления предыдущих версий css и js. Если этого не сделать, то ничего работать не будет!

Запуск

Запускаем на отслеживание изменений и пересборку с Browsersync на http://localhost:3000:

gulp serve

Либо просто на отслеживание изменений и пересборку:

gulp watch

Пересборка

Если нужно пересобрать файлы с измененными параметрами (пути, генерация sourcemap, jQuery), то меняем их в settings.json и запускаем:

gulp build

Загрузка по FTP

Загружает файлы css, js и rev-manifest.json и удаляет предыдущие версии, если необходимо:

gulp deploy

Если нужно выполнить только один таск из deploy, то запускать с параметром --connect:

gulp deploy:download-revision --connect

Что происходит

LESS

Файл, из которого осуществляется сборка: less/style.less. Файл less/path.less создается автоматически тасками (см. выше). Если в settings.json значение SRCMAP равно true, то в итоговый файл добавляется sourcemap. Используется autoprefixer и cssnano.

В сборке есть normalize.css, если не нужно, то просто убрать из less/style.less.

JS

Файл, из которого осуществляется сборка: js/main.js. Обрабатывается плагином gulp-file-include, так что в нем можно использовать конструкции вида:

@@include('component.js')

HTML

Генерятся файлы, лежащие напрямую в папке html в папку public с аналогичными названиями. Файлы в папке html/templates используются для включения в основные при помощи плагина gulp-file-include. Как им пользоваться, можно почитать в документации, он совершенно простой.

Для подключения файлов css, js и прочих использовать @@path, в эту переменную при сборке подставляется текущее значение из PATH в settings.json.

jQuery

Проверяется есть ли указанная версия в npm, если есть, то библиотека устанавливается через npm install в node_modules и её минифицированная версия копируется в папку public/js/vendor.

FTP

Простая реализация посредством vinyl-ftp банальной задачи синхронизации измененных файлов стилей и скриптов с сайтом на боевом сервере и удаление с сервера предыдущих версий этих же файлов.

Таск deploy скачивает с сервера rev-manifest.json, затем загружает туда новые файлы css, js и новый rev-manifest.json, потом удаляет предыдущие версии файлов css и js, если их названия не совпадают с текущими. Использовать на свой страх и риск.

TODO

Список тут >>>

Особая благодарность

• Спонсору коммитов: whatthecommit.com