Gulp.js это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer'ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза.
Вас может отпугнуть молодость проекта, отсутствие плагинов и небольшое сообщество. Но это не так, на данный момент ведется активная разработка проекта, написано достаточное количество плагинов под задачи для популярных инструментов. На данный момент существует 165 плагинов, посмотреть их вы можете тут.
В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github, экспериментируйте.
Установка Gulp
У вас должен быть установлен Node.JS и npm.
Создадим директорию проекта, создадим структуру каталогов и установим Gulp и необходимые плагины.
Струтура проекта:
|--/assets // Компоненты
|--|--/template
|--|--/stylus
|--|--/js
|--|--/img
|--/build // Каталог релиза
|--/public // Каталог разработки
|--package.json
|--gulpfile.js
Установка:
$ mkdir assets public build assets/js assets/img assets/stylus assets/template
$ touch gulpfile.js
$ sudo npm install gulp -g
$ npm init
$ npm install gulp gulp-jade gulp-stylus gulp-livereload gulp-myth gulp-csso gulp-imagemin gulp-uglify gulp-concat gulp-concat connect --save-dev
В корне проекта есть файл конфигурации gulpfile.js его и будем редактировать.
Иницилизируем плагины:
var lr = require('tiny-lr'), // Минивебсервер для livereload
gulp = require('gulp'), // Сообственно Gulp JS
jade = require('gulp-jade'), // Плагин для Jade
stylus = require('gulp-stylus'), // Плагин для Stylus
livereload = require('gulp-livereload'), // Livereload для Gulp
myth = require('gulp-myth'), // Плагин для Myth - http://www.myth.io/
csso = require('gulp-csso'), // Минификация CSS
imagemin = require('gulp-imagemin'), // Минификация изображений
uglify = require('gulp-uglify'), // Минификация JS
concat = require('gulp-concat'), // Склейка файлов
connect = require('connect'), // Webserver
server = lr();
Задачи:
Теперь создадим первую задачу
// Собираем Stylus
gulp.task('stylus', function() {
gulp.src('./assets/stylus/screen.styl')
.pipe(stylus({
use: ['nib']
})) // собираем stylus
.on('error', console.log) // Если есть ошибки, выводим и продолжаем
.pipe(myth()) // добавляем префиксы - http://www.myth.io/
.pipe(gulp.dest('./public/css/')) // записываем css
.pipe(livereload(server)); // даем команду на перезагрузку css
});
В Gulp мы работаем с потоком, поэтому получаем данные из gulp.src и поточно обрабатываем их.
// Собираем html из Jade
gulp.task('jade', function() {
gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade'])
.pipe(jade({
pretty: true
})) // Собираем Jade только в папке ./assets/template/ исключая файлы с _*
.on('error', console.log) // Если есть ошибки, выводим и продолжаем
.pipe(gulp.dest('./public/')) // Записываем собранные файлы
.pipe(livereload(server)); // даем команду на перезагрузку страницы
});
// Собираем JS
gulp.task('js', function() {
gulp.src(['./assets/js/**/*.js', '!./assets/js/vendor/**/*.js'])
.pipe(concat('index.js')) // Собираем все JS, кроме тех которые находятся в ./assets/js/vendor/**
.pipe(gulp.dest('./public/js'))
.pipe(livereload(server)); // даем команду на перезагрузку страницы
});
// Копируем и минимизируем изображения
gulp.task('images', function() {
gulp.src('./assets/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./public/img'))
});
Для комфортной разработки создадим локальный сервер
// Локальный сервер для разработки
gulp.task('http-server', function() {
connect()
.use(require('connect-livereload')())
.use(connect.static('./public'))
.listen('9000');
console.log('Server listening on http://localhost:9000');
});
Необходимые нам выше задачи предназначены для разработки и конечно хочется отслеживать изменения файлов и иметь на сервере Livereload
Для этого создадим задачу 'watch'.
// Запуск сервера разработки gulp watch
gulp.task('watch', function() {
// Предварительная сборка проекта
gulp.run('stylus');
gulp.run('jade');
gulp.run('images');
gulp.run('js');
// Подключаем Livereload
server.listen(35729, function(err) {
if (err) return console.log(err);
gulp.watch('assets/stylus/**/*.styl', function() {
gulp.run('stylus');
});
gulp.watch('assets/template/**/*.jade', function() {
gulp.run('jade');
});
gulp.watch('assets/img/**/*', function() {
gulp.run('images');
});
gulp.watch('assets/js/**/*', function() {
gulp.run('js');
});
});
gulp.run('http-server');
});
Теперь можно запустить наш проект и посмотреть, что получилось.
$ gulp watch
Сервер доступен по адресу localhost:9000 Мы создали среду для веб-разработке проектов с помощью Stylus и Jade с Livereload. Теперь нужно собрать оптимизированный проект. Для этого создадим задачу 'build'
gulp.task('build', function() {
// css
gulp.src('./assets/stylus/screen.styl')
.pipe(stylus({
use: ['nib']
})) // собираем stylus
.pipe(myth()) // добавляем префиксы - http://www.myth.io/
.pipe(csso()) // минимизируем css
.pipe(gulp.dest('./build/css/')) // записываем css
// jade
gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade'])
.pipe(jade())
.pipe(gulp.dest('./build/'))
// js
gulp.src(['./assets/js/**/*.js', '!./assets/js/vendor/**/*.js'])
.pipe(concat('index.js'))
.pipe(uglify())
.pipe(gulp.dest('./build/js'));
// image
gulp.src('./assets/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./build/img'))
});
Запускаем и получаем готовый проект в папке build
$ gulp build
Попробуйте GulpJS и начните уже использовать по-настоящему быстрые вещи в своих проектах.
Автор: exdeniz
