Командная строка в Веб-дизайне: Автоматизация с Gulp

() translation by (you can also view the original English article)

В предыдущем туториале мы настроили Grunt для отслеживания изменений и автоматической компиляции Stylus и Jade. В этой статье мы будем делать тоже самое, но применять при этом другой сборщик проектов: Gulp

Начинаем работать с Gulp

Установка Gulp

Поставьте Gulp глобально:

1	[sudo] npm install gulp -g

Настройте проект для работы с Gulp

Добавьте файл package.json

Как и при работе с Grunt, добавьте “package.json” файл для вашего проекта запустив команду npm init.

Установка Gulp Библиотеки

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

1	npm install gulp --save-dev

Добавьте gulpfile.js

В то время, как Grunt использует “Gruntfile”, Gulp понадобиться “Gulpfile”. Для проекта где вы будете использовать Gulp, создайте в корне файл под названием “gulpfile.js”.

Прежде всего нам понадобиться возможность использовать “gulp” библиотеку, которую мы недавно поставили в папку “node_modules”, сделать это можно, добавив следующую строку в Gulpfile:

1	var gulp = require('gulp');

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

Строго говоря, Gulp не нужны Gulp плагины, так как он может использовать оригинальные npm библиотеки. Однако, скоро вы обнаружите, что существуют плагины специально оптимизированные для работы с Gulp, и по началу их будет легче всего использовать.

Искать Gulp плагины можно на: http://gulpjs.com/plugins/

Мы будем устанавливать следующие плагины:

Эти плагины практически ничем не отличаются от тех, которые мы использовали с Grunt, но есть небольшие отличия.

Во первых, в Gulp есть свой, встроенный “watch” плагин и нам не нужно его ставить.

Во вторых, мы устанавливаем плагин “gulp-concat” для того, чтобы соединить все наши файлы (сконкатенировать их), перед тем, как они будут сжаты. Спасибо Dan за то что поведал об этом!

Обратите внимание: мы используем плагин под названием “gulp-minify-css”, это тоже самое что и библиотека “clean-css”, которую мы использовали ранее.

В терминале перейдите в папку вашего “Gulp Project” и запустите каждую из команд:

1	npm install gulp-stylus --save-dev

1	npm install gulp-autoprefixer --save-dev

1	npm install gulp-minify-css --save-dev

1	npm install gulp-jade --save-dev

1	npm install gulp-uglify --save-dev

1	npm install gulp-concat --save-dev

После того, как это будет сделано, вы найдёте в директории “node_modules”, следующие папки:

Включение Плагинов посредством Gulpfile

Также, как мы делали в статье про Grunt мы должны активировать каждый из этих плагинов, но на этот раз в Gulpfile. Вместо grunt.loadNpmTasks, мы воспользуемся нативной функцией NodeJS require.

Поместите эти строчки в ваш Gulpfile, ниже тех, которые уже были добавлены.

var stylus = require('gulp-stylus');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var jade = require('gulp-jade');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');

Данный подход отличается от Grunt, так как у нас пока нет возможности запустить зарегистрированные команды на данном этапе. Вместо этого мы просто создали JavaScript переменные, для каждого плагина, тем самым у нас будет возможность применять их далее в нашем Gulpfile'е.

Конфигурация и Запуск Тасков в Gulpfile

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

Stylus, Autoprefixer и minifyCSS

Ранее в нашем Gruntfile мы создали отдельную таску для Stylus, Autoprefixer и clean-css. Не нужно этого делать в Gulpfile. Мы знаем, что после компиляции Stylus кода, нам требуется итоговый CSS сжать и добавить к нему автопрефиксы, по этому мы создадим отдельную таску отвечающую за все эти задачи.

Добавьте этот код внизу вашего Gulpfile:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
    	.pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
});

Давайте разберёмся, что мы сделали.

Первым делом, мы использовали gulp.task() для создания новой таски под названием css, также добавили некоторое пространство для JavaScript функций, которые будут выполнятся, каждый раз при запуске команды gulp css:

1	gulp.task('css', function () {
2
3	});

Затем, мы воспользовались gulp.src(), чтобы указать файл, который нам понадобиться для работы “source/stylus/main.styl”:

1	gulp.task('css', function () {
2	gulp.src('source/stylus/main.styl')
3
4	});

После мы использовали функцию Gulp'а pipe() вызывая её для каждого плагина. Проще всего можно понять, как работает pipe(), представив настоящие трубы, когда вы скормите, что-то в первую трубу, это что-то затем попадает в каждую присоединённую трубу.

Наша первая «труба» добавляет Stylus компиляцию, используя при этом те же самые compress и path опции, которые мы использовали ранее при работе с Grunt:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))

});

Далее мы присоединяем вторую трубу, добавляющую авторпрефиксы скомпилированному коду:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())

});

Мы добавляем третью трубу, чистящую наш CSS с префиксами:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())

});

К этому моменту, итоговый CSS файл, будет называться “main.css” в соответствии с файлом “main.styl”, с которым мы начинали. Так что нам понадобится четвёртая труба, для изменения имени на “style.css”:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))

});

Наконец мы подключаем последнюю, пятую трубу, чтобы отправить CSS файл в необходимую папку, используя при этом gulp.dest(), и указывая в качестве точки назначения папку “build”.

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
        .pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
});

Теперь созданная нами css таска готова. В корне проекта запустите:

gulp css

...и ваш Stylus файл будет скомпилирован, к нему будут добавлены автопрефиксы и он будет почищен, затем добавлен в папку “build”, как “style.css”.

Jade

Мы используем такой же процесс для компиляции Jade. Мы создадим таск под названием html, настроим его для использования всех “.jade” файлов в нашей “source/jade” папке, скомпилируем Jade, затем отправим полученный результат в директорию “build”.

Добавьте следующий код, ниже css таска, который вы недавно сделали:

gulp.task('html', function() {
  gulp.src('source/jade/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('build'))
});

Запустите новый таск командой:

gulp html

...и вы найдёте каждый скомпилированный в HTML, Jade файл в папке “build”.

Uglify

Теперь мы будем ещё раз использовать тот же самый подход, настраивая таск под названием js, берущий jQuery и Modernizr файлы из папки “bower_components”, конкатенируя и минифицируя их, после чего файл под названием “output.min.js” будет добавлен в “build”.

gulp.task('js', function() {
  gulp.src([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/modernizr/modernizr.js'
  ])
    .pipe( concat('output.min.js') ) // concat pulls all our files together before minifying them
    .pipe(uglify())
    .pipe(gulp.dest('build'))
});

Обратите внимание: в этот раз мы хотим указать два файла, поэтому мы передаём два имени файла, как массив, то есть значения разделённые запятой, заключённый в квадратные скобки.

Запустите ваш js таск командой

gulp js

...и вы найдёте новый файл под названием “output.min.js” в “build” папке, содержащий минифицированный jQuery и Modernizr.

Добавьте “watch” Таск

Теперь когда у нас имеются css и html таски, мы можем воспользоваться встроенной в Gulp gulp.watch() функцией, так что она будет автоматически работать для нас.

Добавьте этот код внизу вашего Gulpfile для создания watch таска:

1	gulp.task('watch', function () {
2	gulp.watch('source/stylus/*.styl', ['css']);
3	gulp.watch('source/jade/*.jade', ['html']);
4	});

Первый раз gulp.watch() запускается для css таска, каждый раз когда “.styl” файл в папке “source/stylus” изменяется.

Второй раз gulp.watch() запускается для html таска, когда “.jade” файл в “source/jade” меняется.

Запустите watch командой

1	gulp watch

...и ваши Stylus и Jade файлы будут автоматически компилироваться, каждый раз когда вы вносите изменения в соответствующие файлы.

Добавьте “default” Таск

Также, как при работе с Grunt проектом, мы завершим этот туториал создавая дефолтный таск, работающий когда вы запускаете команду gulp.

Добавьте эту строку вниз вашего Gulpfile:

1	gulp.task('default', ['css', 'html', 'js']);

Мы используем этот таск для создания всего проекта, включая JavaScript, запуская при этом css, html и js таски.

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

gulp

В Следующем Туториале

Далее мы добавим последние штрихи нашим Grunt и Gulp проектам, которые сделают из них невероятно эффективный механизм, я говорю об автоматическом обновлении и синхронизации браузера.

Вы научитесь делать команды, с которыми вы сможете открывать превью на локальном хосте, то есть симулировать веб-хостинг на локальной машине используя протокол http://, вместо file:// протокола, для просмотра вашего сайта.

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

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

Увидимся в следующем туториале