autoprefixer监视任务配置

autoprefixer watch task configuration

本文关键字：配置 任务 监视 autoprefixer      更新时间：2023-09-26

当前我在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'));
});

链接到整个gullfile.js文件和我正在使用的repo。

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

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

请参阅此处的相关文档。

已编辑

autoprefixer任务将在其依赖任务之前执行（在我的示例中为"someTask"），因此请注意此处的执行流程。

我找到了一个归档的解决方案。因此，我创建了一个名为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)
相关文章：