autoprefixer watch 任务配置

Question

目前我在 gulpfile.js 中使用 Autoprefixer。然而，它 仅适用于 设置了监视任务！这可能是因为我没有正确引用 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'));
});

这是我 gulpfile.js

中的 autoprefixer 任务

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'));
});

Link 到我正在使用的整个 gulpfile.js file and the repo。

Answer 1

您可以通过从 cmd 行执行 gulp autoprefixer 直接调用您的自动前缀任务，或者您可以将其添加为另一个任务的依赖项。像这样：

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 任务包含监视我的 main.css 变化的 watch 任务。当 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)

autoprefixer watch 任务配置

autoprefixer watch task configuration

javascript

css

gulp

gulp-watch