npm inpm run preparenpm run gulp, npm run gulp dev.
It looks a bit ugly, but this is the only way to work with 4 ver of gulp until it'll be finally released.Boilerplate for UI development
This is a boilerplate for reducing amount of routine tasks in UI development. The boilerplate is built based on my experience and needs, so I don't guarantee it will be useful for you as is. You can use it as an example and modify it or build your own.
.git in order to connect your own git repository laternpm inpm run preparertldist и src папокgulpfile.js — папка в которой лежит gulpfile и таски.src — исходные файлы проектаdist — результат билдаСодержимое папки src
assets
styles — стили проекта
commoncomponentshelpersimages — картинки проекта, включая content папку для картинок в контентеscripts — скриптыtemplates
pages — шаблоны страницcomponents — блоки из которых будут собираться страницы.partialslayoutВ gulpfile.js/index.js описаны таски, которые выполняют те или иные действия. Таски можно вызывать по отдельности и группами. Вызов группами — самый частый юзкейс.
Все gulp-плагины загружаются автоматически из package.json с помощью плагина gulp-load-plugins. Это позволяет уменьшить объем gulpfile.
Gulp в процессе работы берет файл из 1 папки, выполняет с ним необходимые операции и сохраняет в другой папке. Для удобства, все пути к файлам я вынес в переменные и храню их в файле config.json.
В процессе работы много времени уходит на создание файлов для компонентов и страниц. Я решил это дело автоматизировать.
Теперь одной командой npm run addFile можно создать:
При создании стиля для компонента, можно создать файл для респонсив версии, и все это автоматически подключится в main.scss При создании новой страницы, она добавится в список всех страниц в файле index.pug
Все задачи запускаются посредством npm scripts.
npm start — запуск gulp dev. Чтобы запустить browsersync на другом порту, можно писать PORT=8080 npm startnpm run production — запуск gulp productionnpm run deploy — запуск gulp deploynpm run validate — запуск gulp validatenpm run minify — запуск gulp minifynpm run add — запуск генератора файловstyles — компиляция sassstyles:min — минификация cssostyles:rtl — вариант стилей справа-налевоscripts — компиляция es2015scripts:min — минификация jsimages — перенос картинок из src в distimages:min — оптимизация картинок в disttemplates — компиляция jade-шаблоновsprites — сборка спрайтовwatch — слежение за изменениями файловbrowsersync — автообновление в браузереarchive — архивация dist и src папокarchive:dist — архивация distarchive:src — архивация srcssh — запуск задач ssh:clean, ssh:upload, ssh:unzipssh:clean — заходит на сервер, чистит папку проектаssh:upload — загружает на сервер архив dist папкиssh:unzip — распаковывае на сервере dist архив и удаляет егоw3c:html — валидация html кодаdefault — bower, images, styles, scripts, templates, spritesdev — default, browsersync, watchminify — images:min, styles:min, scripts:minproduction — default, styles:rtl, minifydeploy — production, archive, sshvalidate — w3c:html