GulpJS — фантастически быстрый сборщик проектов

Вас может отпугнуть молодость проекта, отсутствие плагинов и небольшое сообщество. Но это не так, на данный момент ведется активная разработка проекта, написано достаточное количество плагинов под задачи для популярных инструментов. На данный момент существует 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 и начните уже использовать по-настоящему быстрые вещи в своих проектах.