自动重定位器监视任务配置

Question

目前，我在我的gulpfile.js中使用gulpfile.js。但是，只在设置了一个监视任务后才能工作！这可能是因为我没有正确引用return gulp.src('./site/css/*.css')。

下面是自动重定位器如何解释如何设置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文件和存储库。

Answer 1

可以通过从cmd行执行gulp autoprefixer直接调用自动重定位任务，也可以将其添加为另一个任务的依赖项。如下所示：

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

请参阅相关的文档这里。

编辑的

自动重定位器任务将在它的依赖任务执行之前执行(在我的示例中是‘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)