Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгами «JavaScript, gulp»



Gravatar image
maxyc
  • Репутация: 29
  • Сниппеты: 4
  • Ревизии: 0

По правде coffescript я тоже не использую. Но не об этом ))) Статья для новичков и для тех, кто стремится изучить эту тему. Для бывалых скорее всего покажется простыми брызгами слюней от "открытия америки".

Есть такая замечательная штука Gulp. Легко гуглится. В кратце это серверный комбайн расширяемый плагинами. Код который привел ниже запускается в командной строке одной лишь командой # gulp При этом он делает следующее

Продолжение »

Gravatar image
artstar
  • Репутация: 1
  • Сниппеты: 1
  • Ревизии: 0

Функция watchable позволяет использовать одну и ту же gulp задачу как для единоразовой прогонки таска, так и с помощью вочера, реагирующего на изменения файлов. Имеет смысл использовать для больших тасков, например, компиляция LESS/SASS + SourceMaps + автопрефиксер + минификация + конкатенация в один файл. Приведенный код будет означать то же самое, что и

 
gulp.task('less', function () {
   return gulp.src('less').pipe(less()).pipe(gulp.dest('css'));
});
gulp.task('less-watch', function (callback) {
   gulp.src('less').pipe(watch('less')).pipe(less()).pipe(gulp.dest('css'));
   //watchable таски надо завершать вручную 
   return callback();
});

Таким образом, функция watchable позволяет не дублировать один и тот же код

var gulp = require('gulp'), watch = require('gulp-watch'), less = require('gulp-less');
var watchable = function (watching, task) {
    return function (callback) {
        var called = task.call({src: function (src) {
            var stream = gulp.src(src);
            if (!!watching) {
                stream = stream.pipe(watch(src));
            }
            return stream;
        }}, callback);
        return watching ? callback() : called;
    };
};
var lessTask = function () {
	//Нюанс: здесь вместо gulp.src надо сначала написать this.src. А дальше как обычно.
    return this.src('less').pipe(less()).pipe(gulp.dest('css'));
};
gulp.task('less', watchable(false, lessTask));
gulp.task('less-watch', ['less'], watchable(true, lessTask));