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

以下是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

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

gulp autoprefixer

请参阅文档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

autoprefixer监视任务配置

2 个答案: