autoprefixer watch task configuration

Question

В настоящее время я использую Autoprefixer внутри своего gulpfile.js. Однако это работает только с заданием на часы! Возможно, это связано с тем, что я неправильно ссылаюсь на return gulp.src('./site/css/*.css').

Вот как autoprefixer объясняет, как настроить autoprefixer задачу

gulp.task('autoprefixer', function() { 
    var postcss  = require('gulp-postcss'); 
    var sourcemaps = require('gulp-sourcemaps'); 
    var autoprefixer = require('autoprefixer'); 

    return gulp.src('./src/*.css') 
     .pipe(sourcemaps.init()) 
     .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ])) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./dest')); 
}); 

Вот моя autoprefixer задача внутри моего gulpfile.js

gulp.watch('./site/css/main.css',['autoprefixer']); 

gulp.task('autoprefixer',function() { 
    var postcss = require('gulp-postcss'); 
    var sourcemaps = require('gulp-sourcemaps'); 
    var autoprefixer = require('autoprefixer'); 

    return gulp.src('./site/css/*.css') 
     .pipe(sourcemaps.init()) 
     .pipe(postcss([ autoprefixer({ browsers: ['> 1%','last 2 versions'] }) ])) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./site/css')); 
}); 

Ссылка на весь gulpfile.js file и repo что я работать с.

Answer 1

Вы можете вызвать свою задачу autoprefixer непосредственно, выполнив gulp autoprefixer из строки cmd или вы можете добавить ее как зависимость от другой задачи. Например:

gulp.task('someTask', ['autoprefixer'], function() { 
    // Do stuff 
}); 

См. Соответствующий бит документации here.

Отредактировано

Задача autoprefixer будет выполнена, прежде чем его зависимая задача делает («someTask» в моем примере), так что будьте в курсе вашего исполнения потока здесь.

Answer 2

Я пришел к решению, из-за которого я архивировал. Поэтому я создал задачу под названием prefixer, содержащую задачу просмотра, которая следит за моим файлом main.css за любые изменения.

// prefixer task containing a watch task for autoprefixer 
gulp.task('prefixer',function(){ 
    gulp.watch('./site/css/main.css',['autoprefixer']); 
}); 

Я затем передать prefixer задачу моей default задачи

//default task 
gulp.task('default',function(){ 
    // call runSequence to make sure our tasks are 
    // perfromed in the correct order 
    runSequence('scripts', 'styles','prefixer','sync'); 
}); 

prefixer задача содержит watch задачу, которая наблюдает за моей main.css изменений. Когда происходят изменения в main.css, требуется задача autoprefixer.

[20:40:56] Starting 'styles'... 

[20:40:57] Starting 'autoprefixer'... 

[20:40:58] Finished 'autoprefixer' after 1.18 s 

[20:40:58] Starting 'autoprefixer'... 

[20:40:58] Finished 'autoprefixer' after 109 ms 

[20:40:59] gulp-notify: [Gulp notification] Styles task complete 
[BS] 1 file changed (main.min.css)