Технологии 16 мин 2016-01-26

Джентльменский набор Front-end разработчика

Ни для кого не секрет, что современный front-end разработчик обязан иметь в своем вооружении один из инструментов сборки проектов такие как Gulp или Grunt. До какого-то времени Grunt занимал монополию в этом вопросе, но отделившаяся от Grunt группа разработчиков решила создать свой легковесный и быстрый таск-менеджер Gulp.

В этой статье мы с нуля подготовим стартовый пакет для использования его в будущих проектах.

Какие мы используем технологии

Программная платформа: Node.js
CSS пре-процессор: Stylus
Таск-менеджер: Gulp

Зачем фронтендеру таск-менеджер

До недавнего времени я сам задавался вопросом, зачем мне нужно тратить время на настройку конфига таск-менеджера, если я и так неплохо справляюсь с версткой макетов, пока не начал использовать CSS пре-процессоры.

CSS пре-процессоры — реально удобны и ускоряют написание стилей, но компилирование кода написанного на пре-процессоре в обычный CSS, не совсем тривиальная задача которая решается одной кнопкой. Тут то нам на помощь и приходит таск-менеджер. Преобразование кода происходит не то чтобы нажатием кнопки, все происходит в режиме онлайн без вашего участия (конечно если правильно все настроить).

Само собой задачи таск-менеджера выходят далеко за пределы процессов связанных с преобразованием кода пре-процессора в чистый CSS. Сборщик проектов так же занимается минификацией, конкатенацией, проверкой кода на ошибки, сборкой изображение в спрайты, оптимизацией изображений под веб и т.д. Вы просто создаете в своем проекте множество логически-разделенных файлов, которые потом удобно собираются в один каталог уже обработанные и готовые для работе в браузере. Но об этом чуть позже, а сейчас начнем с подготовки.

Установка Node.js

Если вы знаете как установить node.js на свою систему и пользуетесь ей, можете смело переходить к следующему заголовку.

Хотелось бы сразу предупредить, что все описанные действия актуальны для Mac OS X, но в целом применимы и для других Unix систем. Разработка через таск-менеджер и командную строку в Windows несколько более затруднительная и тут она описана не будет. Однако, если вы все же пользуетесь Windows и не готовы от него отказываться, то могу предложить вариант использования виртуальной машины с установленной Ubuntu, я использую этот вариант на своей домашней системе, что в целом довольно удобно.

Итак первым делом нам предстоит скачать и установить пакет node.js в свою систему для работы с нодой через консоль. Переходим на официальный сайт node.js и скачиваем свежую stable версию для вашей системы. После установки в вашей командной строке должна быть доступна команда node. Чтобы проверить что ваша node работает, введем в командной строке команду

node -v

в ответ должна появиться версия установленной node.js. Если все хорошо, идем дальше.

Структура директорий проекта

В наших проектах мы будем использовать унифицированный вариант структуры:

develop                     - корневой каталог разработки
└─start                     - каталог проекта
 ├─build                    - билд собраный таск-менеджером
 ├─resource                 - все файлы исходники для разработки (.psd и пр.)
 ├─src                      - каталог разработки
 │├─css                     - каталог разработки стилей
 ││├─images                 - все статичные изображения
 ││├─sprites                - изображение собираемые в спрайт
 ││├─partial                - пользовательские файлы стилей
 │││├─mixins.styl           - пользовательские миксины
 │││└─styles.styl           - пользовательские стили
 ││├─vendor                 - прочие внешние файлы стилей
 ││└─styles.styl            - основной файл стилей
 │├─fonts                   - каталог шрифтов
 │├─img                     - каталог динамических изображений
 │├─js                      - каталог разработки JavaScript
 ││├─_*.js                  - побочные файлы js
 ││├─_main.js               - основной пользовательский js
 ││└─main.js                - основной файл js
 │├─.htaccess               - конфиг для сервера
 │├─*.html                  - файлы разметки страницы
 │├─pages.html              - файл со ссылками на все страницы шаблона
 │├─index.html              - индексовый файл разметки страницы
 │└─include                 - каталог подключаемых файлов разметки
 │ └─*.html                 - подключаемые файлы разметки (header.html и пр.)
 ├─package.json             - конфиг пакетного менеджера npm
 ├─gulpfile.js              - конфиг Gulp
 ├─stylus.template.mustache - маска для чтения спрайтов
 ├─TODO                     - todo лист
 └─.gitignore               - конфиг для Git

Установка

В консоли с помощью команды cd перейдем в корневой каталог разработки, создадим каталог нашего проекта mkdir start и перейдем в него.

Установим нашу структуру для проекта через консоль:

mkdir build resource src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts

Создадим начальные файлы в структуре проекта:

touch gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Создадим package.json

npm init

все всплывающие вопросы можно прощелкать через Enter, node установит им значения по-умолчанию, либо заполнить предлагаемые поля.

.gitignore

Говорим гиту какие каталоги игнорировать и не заливать в репозиторий:

/node_modules/
/build/
/resource/

Каталог node_modules появится позже после установки плагинов и будет содержать в себе все node-плагины проекта.

src/.htaccess

Устанавливаем для сервера дополнительное gzip сжатие и кэширование:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
<IfModule mod_headers.c>
    # Serve gzip compressed CSS files if they exist 
    # and the client accepts gzip.
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]

    # Serve gzip compressed JS files if they exist 
    # and the client accepts gzip.
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]


    # Serve correct content types, and prevent mod_deflate double gzip.
    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
    RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]

    <FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Serve correct encoding type.
      Header append Content-Encoding gzip

      # Force proxies to cache gzipped & 
      # non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>
    
</IfModule>

ExpiresActive on
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 months"

src/css/styles.styl

Подключим пользовательские файлы стилей в основной файл стилей:

@import 'partial/styles'

Обратите внимание, что для подключение .styl файлов, расширение не указывается, согласно семантике кода пре-процессора Stylus. Для подключения стилей в другом расширении, например .css, указание последнего обязательно.

TODO

Эта страница содержит в себе todo лист разработки. Более подробно о работе с данным файлом вы можете почитать на странице плагина PlainTasks для Sublime Text.

На этом установка структуры завершена.

Установка плагинов через пакетный менеджер npm

Node.js по-умолчанию включает в себя пакетный менеджер npm, в репозиториях которого собрано множество плагинов, с которыми нам и предстоит работать.

Установка плагина Gulp

Для начала нужно установить Gulp глобально (с ключем -g) на нашу систему

npm install gulp -g

Делать это нужно один раз, в дальнейшем глобальная установка не требуется.

Теперь нужно установить Gulp локально в каталог проекта

npm install gulp --save-dev

Ключ --save-dev говорит о том, что информация о плагине (имя в репозитории и его версия) будет добавлена в конфиг package.json и запомнит его для данного проекта. Поскольку мы не храним в гите тяжеловесную папку с плагинами node_modules, сохраненная в конфиге информация об установленных плагинах позволит всего одной командой npm i развернуть в проекте все нужные плагины.

Для каждой команды существуют сокращения, поэтому команду выше мы можем записать в более коротком формате

npm i gulp -D

В дальнейшем мы так же будем пользоваться сокращенным форматом команд.

Плагин Stylus для Gulp

В наших проектах мы пользуемся пре-процессором Stylus который отлично работает и компилируется на ноде.

Устанавливаем:

npm i gulp-stylus -D

Плагины обработки CSS

Автопрефиксер - автоматически подставляет префиксы -ms- -o- -moz- -webkit- в нужные свойства:

npm i gulp-autoprefixer -D

Минификация CSS - плагин минифицирует выходной CSS файл избавляя его от лишних пробелов и табуляций:

npm i gulp-minify-css -D

Плагины обработки изображений

Объединение картинок в спрайты — вам больше не нужно тратить часы драгоценного времени на объединение всех изображений в спрайты, а потом высчитывать их координаты, все это за вас автоматически сделает этот плагин:

npm i gulp.spritesmith -D

Добавим в ранее созданный файл stylus.template.mustache маску вычисления позиций в спрайтах:

{{#items}}
${{name}} = {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}';
{{/items}}

Добавим специальные миксины в mixins.styl:

spriteWidth($sprite)
    width $sprite[4]

spriteHeight($sprite)
    height $sprite[5]

spritePosition($sprite)
    background-position $sprite[2] $sprite[3]

spriteImage($sprite)
    background-image url($sprite[8])

sprite($sprite)
    if !match('hover', selector()) && !match('active', selector())
        spriteImage($sprite)
    spritePosition($sprite)
    spriteWidth($sprite)
    spriteHeight($sprite)

Подключим миксины и генерируемый файл с координатами в основной файл стилей src/css/styles.styl:

@import 'partial/sprite'
@import 'partial/mixins'

Обратите внимание что файлы спрайтов должны подключаться до пользовательских стилей @import 'partial/styles'

Оптимизация изображений под веб — плагин автоматически вырежет всю лишнюю информацию из ваших изображений и ужмет их до оптимального размера, что позволит в некоторых случаях добиться сокращения объема изображений до 90%:

npm i gulp-imagemin -D

Плагины обработки JavaScript

Минификация JS — плагин максимально минифицирует ваш JS код сокращая время его загрузки:

npm i gulp-uglify -D

Отслеживание ошибок JS — плагин досканально проверит ваш JS код на выявление всех несоответствий и выведет их в консоль:

npm i jshint gulp-jshint -D

Плагины обработки HTML

Подключаемые файлы — плагин позволяет хранить статичные части сайта, такие как header, footer, aside и т.д., в отдельных файлах и подключать их в любой части другого файла. Больше нет надобности, в случае мелких изменений в шапке, менять десятки, а то и сотни html страниц шаблона:

npm i gulp-rigger -D

Плагин так же совместим с JS.

Подключим пользовательский JS в основной файл JS src/js/main.js констуркцией:

//= _main.js

Подключим в index.html файлы header.html и footer.html

//= include/header.html
<!--some html-->
//= include/footer.html

Прочие плагины

LiveReload — плагин избавляет вас от надобности каждый раз перезагружать страницу в браузере чтобы увидеть изменения, теперь это происходит автоматически при сохранении измененного файла:

npm i gulp-connect -D

Предохраняем Gulp от вылета — иногда случается так, что Gulp может вылететь из режима наблюдения в случае возникновения критических ошибок (в основном из-за JS). Данный плагин, по возможности, старается оставить процессы Gulp работоспособными:

npm i gulp-plumber -D

Переименование файлов — самая обычная работа с именами файлов. Плагин позволяет полностью переименовывать файлы, изменять расширение, добавлять префиксы и постфиксы, например чтобы привести файл вида style.styl в style.min.css:

npm i gulp-rename -D

Клинер — иногда возникает потребность в полном очищении каталога build, тут нам на помощь приходит плагин:

npm i rimraf -D

Sourcemap — для того чтобы после минификации ваши файлы оставались читаемы через отладку браузером, нужно добавлять sourcemap в минифицируемые файлы:

npm i gulp-sourcemaps -D

Расширенные возможности watch — плагин делает watch умным, теперь он не перезаписывает все файлы в билд при изменении всего одного файла, перезаписывается конкретный измененный файл, что экономит время и ресурсы:

npm i gulp-watch -D

Проверим package.json

После всех установленных плагинов, проверим наш package.json. Он должен иметь примерно следующий вид:

{
  "name": "start",
  "version": "1.0.0",
  "description": "Start pack for Front-end develop",
  "author": "Ivan Ivanov",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "gulp": "latest",
    "gulp-autoprefixer": "latest",
    "gulp-connect": "latest",
    "gulp-imagemin": "latest",
    "jshint": "latest",
    "jshint-stylish": "latest",
    "gulp-jshint": "latest",
    "gulp-minify-css": "latest",
    "gulp-plumber": "latest",
    "gulp-rename": "latest",
    "gulp-rigger": "latest",
    "gulp-sourcemaps": "latest",
    "gulp-stylus": "latest",
    "gulp-uglify": "latest",
    "gulp-watch": "latest",
    "gulp.spritesmith": "latest",
    "rimraf": "latest"
  }
}

Вместо latest в вашем случае будут прописаны конкретные версии установленных плагинов. Т.к. мы формируем наш стартовый пакет, который будет использоваться в множестве проектов, рекомендуется также заменить значения версий на latest, чтобы всегда устанавливать актуальные версии плагинов в проект.

В папке проекта также должен появиться каталог node_modules в котором хранятся все файлы плагинов ноды. Все нужные плагины установлены, можно переходить к настройки конфига Gulp.

Настройка gulpfile.js

gulpfile.js — это основной файл конфигурации нашего таск-менеджера, именно в нем мы будем хранить все настройки и команды.

Вся работа Gulp сводится к task (англ. задача). Задача - это отдельная самостоятельная функция с именем. Каждая задача может быть вызвана отдельно.

Режим совмстимости с современными стандартами

Во первых в начало файла подключим режим совместимости только по современным стандартам:

'use strict';

Подробнее про эту директиву можно почитать тут.

Инициализируем плагин

Плагины инициализируются следующей конструкцией:

var initPlugin = require('plugin-name');

В соответствии с этой конструкцией инициализируем все наши плагины:

var gulp = require('gulp'), //основной плагин gulp
    stylus = require('gulp-stylus'), //препроцессор stylus
    prefixer = require('gulp-autoprefixer'), //расставление автопрефиксов
    cssmin = require('gulp-minify-css'), //минификация css
    uglify = require('gulp-uglify'), //минификация js
    jshint = require("gulp-jshint"), //отслеживание ошибкок в js
    rigger = require('gulp-rigger'), //работа с инклюдами в html и js
    imagemin = require('gulp-imagemin'), //минимизация изображений
    spritesmith = require("gulp.spritesmith"), //объединение картинок в спрайты
    rimraf = require('rimraf'), //очистка
    sourcemaps = require('gulp-sourcemaps'), //sourcemaps
    rename = require("gulp-rename"), //переименвоание файлов
    plumber = require("gulp-plumber"), //предохранитель для остановки гальпа
    watch = require('gulp-watch'), //расширение возможностей watch
    connect = require('gulp-connect'); //livereload

Константы путей

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

var path = {
    build: { //Тут мы укажем куда складывать готовые после сборки файлы
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/css/images/',
        fonts: 'build/fonts/',
        htaccess: 'build/',
        contentImg: 'build/img/',
        sprites: 'src/css/images/',
        spritesCss: 'src/css/partial/'
    },
    src: { //Пути откуда брать исходники
        html: 'src/template/*.html', //Синтаксис src/template/*.html говорит gulp что мы хотим взять все файлы с расширением .html
        js: 'src/js/[^_]*.js',//В стилях и скриптах нам понадобятся только main файлы
        jshint: 'src/js/*.js',
        css: 'src/css/styles.styl',
        cssVendor: 'src/css/vendor/*.*', //Если мы хотим файлы библиотек отдельно хранить то раскоментить строчку
        img: 'src/css/images/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
        fonts: 'src/fonts/**/*.*',
        contentImg: 'src/img/**/*.*',
        sprites: 'src/css/sprites/*.png',
        htaccess: 'src/.htaccess'
    },
    watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
        html: 'src/template/**/*.html',
        js: 'src/js/**/*.js',
        css: 'src/css/**/*.*',
        img: 'src/css/images/**/*.*',
        contentImg: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*',
        htaccess: 'src/.htaccess',
        sprites: 'src/css/sprites/*.png'
    },
    clean: './build', //директории которые могут очищаться
    outputDir: './build' //исходная корневая директория для запуска минисервера
};

Обратите внимание, что мы можем использовать маски имен:

*.js — все файлы с расширением js
[^_]*.js — все файлы с расширением js, исключая те что начинаются с нижнего подчеркивания
*.* — любые файлы с любым расширением в пределах текущей дитректории
/**/*.html — все файлы с расширением .html в пределах текущей директории и всех дочерних директорий

Task (задачи)

Теперь, когда все константы прописаны, можно приступить к написанию тасков. Все задачи имеют следующую конструкцию:

gulp.task('taskName', function(){
    //some functions
});

Мини-сервер и LiveReload

Первым делом мы настроим работу локального сервера и LiveReload:

// Локальный сервер для разработки
gulp.task('connect', function(){
    connect.server({ //настриваем конфиги сервера
        root: [path.outputDir], //корневая директория запуска сервера
        port: 9999, //какой порт будем использовать
        livereload: true //инициализируем работу LiveReload
    });
});

Скорее всего вам часто придется работать одновременно сразу в нескольких проектов. Сервер позволяет одновременно запускать множество серверов, достаточно для разных проектов прописать свой порт.

Билд HTML

// таск для билдинга html
gulp.task('html:build', function () {
    gulp.src(path.src.html) //Выберем файлы по нужному пути
        .pipe(rigger()) //Прогоним через rigger
        .pipe(gulp.dest(path.build.html)) //выгрузим их в папку build
        .pipe(connect.reload()) //И перезагрузим наш сервер для обновлений
});

Билд JS

// проверка js на ошибки и вывод их в консоль
gulp.task('jshint:build', function() {
    return gulp.src(path.src.jshint) //выберем файлы по нужному пути
        .pipe(jshint()) //прогоним через jshint
        .pipe(jshint.reporter('jshint-stylish')); //стилизуем вывод ошибок в консоль
});

// билдинг яваскрипта
gulp.task('js:build', function () {
    gulp.src(path.src.js) //Найдем наш main файл
        .pipe(rigger()) //Прогоним через rigger
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(uglify()) //Сожмем наш js
        .pipe(sourcemaps.write()) //Пропишем карты
        .pipe(rename({suffix: '.min'})) //добавим суффикс .min к выходному файлу
        .pipe(gulp.dest(path.build.js)) //выгрузим готовый файл в build
        .pipe(connect.reload()) //И перезагрузим сервер
});

Билд спрайтов

Все изображения для объединения в спрайты складываются в директорию src/css/sprites/ и после прогона через Gulp становятся единым спрайтовым изображением. В спрайты не стоит складывать логотипы и бэкграунды без четких размеров.

// билдим спрайты
gulp.task('sprites:build', function () {
    var spriteData =
        gulp.src(path.src.sprites) //выберем откуда брать изображения для объединения в спрайт
            .pipe(spritesmith({
                imgName: 'sprite.png', //имя спрайтового изображения
                cssName: 'sprite.styl', //имя стиля где храним позиции изображений в спрайте
                imgPath: 'images/sprite.png', //путь где лежит спрайт
                cssFormat: 'stylus', //формат в котором обрабатываем позиции
                cssTemplate: 'stylus.template.mustache', //файл маски
                cssVarMap: function(sprite) {
                    sprite.name = 's-' + sprite.name //имя каждого спрайта будет состоять из имени файла и конструкции 's-' в начале имени
                }
            }));
    spriteData.img.pipe(gulp.dest(path.build.sprites)); // путь, куда сохраняем картинку
    spriteData.css.pipe(gulp.dest(path.build.spritesCss)); // путь, куда сохраняем стили
});

Для вывода спрайта достаточно воспользоваться миксином. Например, для файла lorem.png выборка из спрайта будет выглядеть следующим образом:

.lorem
    sprite($s-lorem)

Теперь объект с классом .lorem примет размеры изображения и само изображение в качестве фона.

Билд статичных изображений

Статичные изображения - это изображения используемые в шаблоне верстки.

// билдим статичные изображения
gulp.task('image:build', function () {
    gulp.src(path.src.img) //Выберем наши картинки
        .pipe(imagemin({ //Сожмем их
            progressive: true, //сжатие .jpg
            svgoPlugins: [{removeViewBox: false}], //сжатие .svg
            interlaced: true, //сжатие .gif
            optimizationLevel: 3 //степень сжатия от 0 до 7
        }))
        .pipe(gulp.dest(path.build.img)) //выгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

Билд динамичных изображений

Динамичные изображения — это контентные изображения, которые будут меняться на сайте и на уровне шаблона подключаются лишь для демонстрации. Например, это могут быть изображения для новостей и пр.

// билдим динамичные изображения
gulp.task('imagescontent:build', function() {
    gulp.src(path.src.contentImg)
        .pipe(imagemin({ //Сожмем их
            progressive: true, //сжатие .jpg
            svgoPlugins: [{removeViewBox: false}], //сжатие .svg
            interlaced: true, //сжатие .gif
            optimizationLevel: 3 //степень сжатия от 0 до 7
        }))
        .pipe(gulp.dest(path.build.contentImg)) //выгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

Билдим CSS

// билдинг пользовательского css
gulp.task('cssOwn:build', function () {
    gulp.src(path.src.css) //Выберем наш основной файл стилей
        .pipe(sourcemaps.init()) //инициализируем soucemap
        .pipe(stylus({
            compress: true,
            'include css': true
        })) //Скомпилируем stylus
        .pipe(prefixer({
            browser: ['last 3 version', "> 1%", "ie 8", "ie 7"]
        })) //Добавим вендорные префиксы
        .pipe(cssmin()) //Сожмем
        .pipe(sourcemaps.write()) //пропишем sourcemap
        .pipe(rename({suffix: '.min'})) //добавим суффикс .min к имени выходного файла
        .pipe(gulp.dest(path.build.css)) //вызгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

Отдельный таск для внешних стилей:

// билдинг вендорного css
gulp.task('cssVendor:build', function () {
    gulp.src(path.src.cssVendor) // Берем папку vendor
        .pipe(sourcemaps.init()) //инициализируем soucemap
        .pipe(cssmin()) //Сожмем
        .pipe(sourcemaps.write()) //пропишем sourcemap
        .pipe(gulp.dest(path.build.css)) //выгрузим в build
        .pipe(connect.reload()) //перезагрузим сервер
});

Также добавим таск для билда общего CSS:

// билдим css целиком
gulp.task('css:build', [
    'cssOwn:build',
    // 'cssVendor:build'
]);

В случае если требуется обработать внешние стили отдельно от домашних и выгрузить их отдельными файлами нужно раскомментировать строчку 'cssVendor:build'

Билд шрифтов

// билдим шрифты
gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts)) //выгружаем в build
});

Билд .htaccess

// билдим htaccess
gulp.task('htaccess:build', function() {
    gulp.src(path.src.htaccess)
        .pipe(gulp.dest(path.build.htaccess)) //выгружаем в build
});

Общий билд

Для того чтобы нам не приходилось билдить каждую часть отдельно, пропишем таск для общего билда:

// билдим все
gulp.task('build', [
    'html:build',
    'jshint:build',
    'js:build',
    'sprites:build',
    'css:build',
    'fonts:build',
    'htaccess:build',
    'image:build',
    'imagescontent:build'
]);

Очистка билда

Иногда требуется полностью очистить каталог build. Здесь нам на помощь придет следующий таск:

// чистим папку билда
gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

Watch или отслеживание изменений в реальном времени

Одной из самых важных и полезных функций Gulp является функция watch, которая позволяет отслеживать в реальном времени все изменения с производимыми файлами и в зависимости от этого выполнять конкретные действия:

// watch
gulp.task('watch', function(){
     //билдим html в случае изменения
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
     //билдим спрайты в случае изменения
    watch([path.watch.sprites], function(event, cb) {
        gulp.start('sprites:build');
    });
     //билдим контекстные изрображения в случае изменения
    watch([path.watch.contentImg], function(event, cb) {
        gulp.start('imagescontent:build');
    });
     //билдим css в случае изменения
    watch([path.watch.css], function(event, cb) {
        gulp.start('css:build');
    });
     //проверяем js в случае изменения
    watch([path.watch.js], ['jshint']);
     //билдим js в случае изменения
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
     //билдим статичные изображения в случае изменения
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
     //билдим шрифты в случае изменения
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
     //билдим htaccess в случае изменения
    watch([path.watch.htaccess], function(event, cb) {
        gulp.start('htaccess:build');
    });
});

Действия по-умолчанию

Действия по-умолчанию — это то какие задачи будет выполнять таск-менеджер при вводе команды gulp в консоль:

// действия по умолчанию
gulp.task('default', ['build', 'watch', 'connect']);

В нашем случае по-умончанию мы сбилдим наш проект, включим режим watch и запустим сервер.

Команды для командной строки

Все команды гальпа для командной строки состоят из двух частей это непосредственно сама команда gulp и через пробел имя таска. Вот список команд применимых для нашего конфига:

gulp - основная команда, запускает таск default
gulp build - билдим всё
gulp watch - запуск watch
gulp clean - очистка каталога build
gulp connect - запуск сервер
gulp html:build - билд HTML
gulp jshint:build - проверяем JS на ошибки
gulp js:build - билд JS
gulp sprites:build - билд спрайта
gulp image:build - билд статичных изображений
gulp imagecontent:build - билд динамичных изображений
gulp cssOwn:build - билд пользовательского CSS
gulp cssVendor:build - билд внешних CSS
gulp css:build - общий билд CSS
gulp fonts:build - билд шрифтов
gulp htaccess:build - билд .htaccess

На данном этапе настройка gulpfile.js закончена.

Копируем стартовый пакет в проект

Для начала зайдем через консоль в папке где мы ведем разработку, например cd develop/example и скопируем все из директории стартового пакета в наш проект cp -a ~/develop/start/. ~/develop/example/

Такой способ копирования наиболее удобен, т.к. точно скопирует все, в том числе и скрытые файлы .gitignore и пр.

Заключение

Используя данное руководство мы подготовили стартовый пакет для использования Gulp в своих проектах для Front-end разработки.

Скачать готовый пакет: start.zip

Так же данный пакет доступен на GitHub

Post Scriptum

Данная статья не является заключительной и будет обновляться в зависимости от изменений и улучшений.