Frontender Magazine

Простое и удобное gulp‑окружение для разработки html5‑игры меньше, чем за 5 минут

Gulp [/gʌlp/ /галп/] — система потоковой сборки, подробнее о ней можно прочесть в вики документации проекта.

Начнём

Установим gulp глобально:

npm install -g gulp    

Вы можете найти все необходимые плагины по тегу gulpplugin на сайте npmjs. Для нашего примера понадобятся следующие плагины: gulp-browserify, gulp-livereload, gulp-concat и gulp-styl.

Выполните установку плагинов следующей командой:

npm install --save gulp-browserify gulp-concat gulp-styl gulp-livereload tiny-lr

Примечание : tiny-lr понадобится для работы с gulp-livereload.

Структура проекта

|-src/
    |-index.js
    |-lib/
|-css/
    |-index.css
|-index.html
|-package.json
|-README.md

Настройка Gulp

Создайте файл gulpfile.js в корне вашего проекта. Теперь запишем в этот файл простую задачу, которую будет выполнять gulp:

gulp.task('default', function() {  
    gulp.run('lr-server', 'scripts', 'styles');
});

Если вы выполните в терминале команду gulp, запустится задача по умолчанию, переданная коллбеком в gulp.task('default'), которая, в свою очередь, запустит вложенные в нее подзадачи lr-server, scripts и styles. Теперь нам нужно написать код для этих подзадач:

В этом случае мы запускаем задачу scripts каждый раз, когда изменяется любой файл внутри папки src.

Завершение установки

По окончанию процесса настройки ваш gulpfile.js будет выглядеть так:

var gulp = require('gulp');  
var browserify = require('gulp-browserify');  
var concat = require('gulp-concat');  
var styl = require('gulp-styl');  
var refresh = require('gulp-livereload');  
var lr = require('tiny-lr');  
var server = lr();

gulp.task('scripts', function() {  
    gulp.src(['src/**/*.js'])
        .pipe(browserify())
        .pipe(concat('dest.js'))
        .pipe(gulp.dest('build'))
        .pipe(refresh(server))
})

gulp.task('styles', function() {  
    gulp.src(['css/**/*.css'])
        .pipe(styl({compress : true}))
        .pipe(gulp.dest('build'))
        .pipe(refresh(server))
})

gulp.task('lr-server', function() {  
    server.listen(35729, function(err) {
        if(err) return console.log(err);
    });
})

gulp.task('default', function() {  
    gulp.run('lr-server', 'scripts', 'styles');

    gulp.watch('src/**', function(event) {
        gulp.run('scripts');
    })

    gulp.watch('css/**', function(event) {
        gulp.run('styles');
    })
})

Использование команды gulp в терминале будет выглядеть примерно так:
Gulp

Совет напоследок

Если вы не обнаружили необходимый вам gulp-плагин, вы можете попробовать написать свой собственный, руководствуясь этой статьей.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Deepak Raj
Автор:
Deepak Raj
GitHub:
deepak1556
Twitter:
@Deepak1556
Владимир Старков
Переводчик:
Владимир Старков
Сaйт:
http://iamstarkov.com
Twitter:
@iamstarkov
GitHub:
iamstarkov

Комментарии (15 комментариев, если быть точным)

Автар пользователя
koistya

Ище пример использования Gulp.js:

HTML5 Boilerplate + Gulp.js => Web App Boilerplate

https://github.com/KriaSoft/Web-App-Boilerplate

Автар пользователя
Grawl

“Метод gulp.run() устарел, используйте зависимости задач вместо этого.”

А везде в примерах только .run() всё и написано. Новичком в этом дерьме разбираться просто великолепно. Всё устарело, половина расширений не устанавливается из-за node-gyp rebuild, и везде чёртовы overkill'ы. На кой чёрт здесь tiny-lr, если есть gulp-livereload, который по умолчанию делает .listen('35729')? Или я из будущего пишу, в котором всё это уже есть?

Автар пользователя
iamstarkov

Или я из будущего пишу, в котором всё это уже есть?

кажется, что так — три месяца прошло. Галп развивается очень быстро.

Автар пользователя
koistya

На носу 4-ая версия, там будет доработана система зависимостей одних тасков от других...

Автар пользователя
Grawl

Так как мне использовать это дело-то? Не работает никакой код, найденный в сети. Всё сейчас утыкается в gulp-livereload – он создаёт сервер и не следит за файлами после этого.

js var canyon={ sass:'./library/styles/*.sass', dist:'./' }; var gulp=require('gulp'), refresh=require('gulp-livereload'), sass=require('gulp-ruby-sass'), prefix=require('gulp-autoprefixer'); gulp.task('sass',function(){ gulp.src(canyon.sass) .pipe(sass({ require:'rails-sass-images', sourcemap:true })) .pipe(gulp.dest(canyon.dist)); gulp.src(canyon.dist+'*.css') .pipe(prefix()) .pipe(gulp.dest(canyon.dist)) .pipe(refresh()); }); gulp.task('default',function(){ var server=refresh(); gulp.watch(canyon.dist).on('change',function(file){ server.changed(file.path); gulp.watch(canyon.sass,['sass']); }); });

bash Devastator:canyon grawl$ gulp [gulp] Using gulpfile ~/Dropbox/Sites/Каньон/wordpress/wp-content/themes/canyon/gulpfile.js [gulp] Starting 'default'... [gulp] Finished 'default' after 103 ms [gulp] Live reload server listening on: 35729

А мне надо, чтобы я при начале работы открыл терминал, вбил gulp⏎ и свернул его. Затеял это дело ради параметра require в sass – потому что через sass --require … в терминале можно передать только одну строку, а вдруг понадобится больше? Ну и вообще, решил попробовать наконец-то взрослую систему сборки, а она не работает нифига и в интернетах всё описание к старым версиям, и примеры кода не работают.

Автар пользователя
smolnikov

@Grawl спросите на stackoverflow. Я уверен, коллеги-разработчики со всего мира с удовольствием помогут в решении этой задачи, а потом это решение смогут увидеть и другие.

Автар пользователя
koistya

Ещё можете посмотреть gulpfile.js в этом проекте:

https://github.com/KriaSoft/SPA-Seed.Front-end

Чуть позже добавлю туда LiveReload

Автар пользователя
iamstarkov

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

Автар пользователя
Grawl

И то верно. Благодарю, ребята. Но я думаю, что надо переключиться на Grunt, потому что у gulp-autoprefixer нет поддержки sourcemap, а у grunt-autoprefixer есть 😛

Автар пользователя
iamstarkov

а что на этот ишью говорят мейнтенеры gulp-autoprefixer?

Автар пользователя
Grawl

Что нет времени 😄

Автар пользователя
koistya

gulp-autoprefixer предназначен для использования для production сборки, а sourcemap обычно используют для development, поэтому там sourcemap особо никому и не нужен.

Автар пользователя
Grawl

Если он для production, то где для development? Не отмазка.

Автар пользователя
koistya

Мало кому autoprefixer нужен для дебага (development). Какой в нём смысл? Если integration тесты прогнать, там sourcemap тоже не нужны.

Автар пользователя
Grawl

Тоже не мнение ни разу. Я даже поленюсь объяснять, почему. С такими объяснениями можно всегда делать плохо и ни в чём себя не упрекать вообще. Фу так думать вообще. Простите.