- install deps
npm i
- all tasks should be started via npm. e.g.
npm 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.
- pug -> html
- postcss -> css
- browsersync
- autoprefixer
- bower
- es2015 compilation
- watch 'n compile
Автоматизированный шаблон для быстрого старта front-end разработки
Этот шаблон, в первую очередь, предназначен для автоматизации рутинных задач в процессе верстки. Он не подойдет для разработки приложений на ReactJS или Angular, но отлично потянет простую верстку с вкраплениями JavaScript функционала.
Шаблон собран на основе моего опыта и потребностей, поэтому я не обещаю, что он может быть полезен вам в первоначальном виде, но его можно использовать как наглядный пример и дорабатывать под свои нужды.
- Скачать и установить node.js
- Склонировать этот проект и удалить
.git
, чтобы привязать свой гит репозиторий - установить все зависимости
npm i
- сохранить файл
gulpfile.js/tasks/ssh.json.example
какssh.json
со своими данными
- Компиляция es2015
- Компиляция Jade-шаблонов
- Компиляция Sass
- Сборка спрайтов и генерация стиля для них. Я писал статью о том, как это все работает.
- Добавление вендорных префиксов к свойствам
- Минификация css и js
- Оптимизация картинок
- авто-обновление браузера
- подготовка стилей
rtl
- загрузка зависимостей js через bower
- загрузка файлов на сервер по ssh
- Валидация html на w3c
- архивирование файлов
dist
иsrc
папок - слежение за изменениями файлов
gulpfile.js
— папка в которой лежитgulpfile
и таски.src
— исходные файлы проектаdist
— результат билда
Содержимое папки src
assets
styles
— стили проектаcommon
components
helpers
images
— картинки проекта, включаяcontent
папку для картинок в контентеscripts
— скрипты
templates
pages
— шаблоны страницcomponents
— блоки из которых будут собираться страницы.partials
layout
В gulpfile.js/index.js
описаны таски, которые выполняют те или иные действия. Таски можно вызывать по отдельности и группами. Вызов группами — самый частый юзкейс.
Все gulp
-плагины загружаются автоматически из package.json
с помощью плагина gulp-load-plugins
. Это позволяет уменьшить объем gulpfile
.
Gulp
в процессе работы берет файл из 1 папки, выполняет с ним необходимые операции и сохраняет в другой папке. Для удобства, все пути к файлам я вынес в переменные и храню их в файле config.json
.
Все задачи запускаются посредством npm scripts.
npm start
— запускgulp dev
. Чтобы запустить browsersync на другом порту, можно писатьPORT=8080 npm start
npm run prod
— запускgulp production
npm run deploy
— запускgulp deploy
npm run validate
— запускgulp validate
npm run minify
— запускgulp minify
styles
— компиляция sassstyles:min
— минификацияcsso
styles:rtl
— вариант стилей справа-налевоscripts
— компиляция es2015scripts:min
— минификация jsimages
— перенос картинок изsrc
вdist
images:min
— оптимизация картинок вdist
templates
— компиляция jade-шаблоновsprites
— сборка спрайтовbower
— загрузка bower зависимостейwatch
— слежение за изменениями файловbrowsersync
— автообновление в браузереarchive
— архивацияdist
иsrc
папокarchive:dist
— архивацияdist
archive:src
— архивацияsrc
ssh
— запуск задачssh:clean
,ssh:upload
,ssh:unzip
ssh:clean
— заходит на сервер, чистит папку проектаssh:upload
— загружает на сервер архивdist
папкиssh:unzip
— распаковывае на сервереdist
архив и удаляет егоw3c:html
— валидация html кода
default
—bower
,images
,styles
,scripts
,templates
,sprites
dev
—default
,browsersync
,watch
minify
—images:min
,styles:min
,scripts:min
production
—default
,styles:rtl
,minify
deploy
—production
,archive
,ssh
validate
—w3c:html