Шаблон проекта для быстрого старта.
gulp-uglify- Для сжатия JS кода.gulp-sass- Для компиляции SASS кода.gulp-sourcemaps- Для генерации CSS и JS sourscemaps, которые помогают при отладке кода.gulp-rigger- Позволяет импортировать один файл в другой.gulp-minify-css- Для сжатия CSS кода.gulp-imagemin- Для сжатия картинок.imagemin-pngquant- Дополнения к предыдущему плагину, для работы с PNG.browser-sync- С помощью этого плагина мы можем легко развернуть локальный dev сервер с блэкджеком и livereload, а так же с его помощью мы сможем сделать тунель на наш localhost, что бы легко демонстрировать верстку заказчику.gulp-postcss- Постпроцессор для CSS.autoprefixer- Автоматически добавляет вендорные префиксы к CSS свойствам.postcss-sprites- Генерирует спрайты из стилей.postcss-assets- Встраивает файлы в код и получает их размеры.
gulp-if- Условия для запуска тасков.yargs- Разбирает аргументы в командной строке.path- Этот модуль содержит утилиты для обработки и преобразования пути к файлу.gulp-watch- Для автоматической пересборки файлов сразу после их сохранения.rimraf- rm -rf для ноды
-
Склонируй репозиторий и перейди в папку проекта.
-
Установи Gulp и Bower глобально:
npm install -g gulp bower
- Установи зависимости:
npm install
bower install
- Запусти Gulp:
gulp
- Открой в браузере
http://localhost:9000/.
- Собирает проект в папку
build, не включая локальный сервер:
gulp build
- Собирает проект для продакшена, минифиуируя js и css. В таске отключены запуск локального сервера и создание sourscemaps:
gulp --production
- Удаление папки
build:
gulp clean
Плагин gulp-rigger позволяет импортировать один файл в другой простой конструкцией
//= templates/footer.html
и эта строка при компиляции будет заменена на содержимое файла footer.html, который находится в дирректории templates.
Для создания простого спрайта из изображений нужно использовать миксин
+s(name)
Следующий миксин для спрайта под ретину. Для него необходимо использовать 2 изображения: простое и в 2 раза больше. Например: sp.png и sp@2x.png.
+sr(name)
Изображения, которые собираются в спрайт, должны быть в формате .png и находится в дирректории media/img/sprites/.
Плагин postcss-assets позволяет инлайнить изображения прямо в код:
background: inline('sp.png')
Так же позволяет подставить размеры картинки:
width: width('sp.png')
height: height('sp.png')
background-size: size('sp.png')
Изображения, которые инлайнятся, должны находится в дирректории media/img/.
Чтобы еще лучше понять как все работает - прочитайте статью http://habrahabr.ru/post/250569/.