gulp autoprefixer编译为.scss而不是.css

Question

我正尝试使用gulp autoprefixer，但是当它编译代码时，它会在我的公用文件夹中创建一个.scss文件。 我的文件结构如下：

根>设备>青菜> main.scss

&

公共> CSS>的main.css

当我在main.scss的更改一般的sass代码编译得很好，但是当使用autoprefix时，它会在我的public/css目录中创建一个main.scss文件。

我gulpfile.js如下：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 

var autoprefixer = require('gulp-autoprefixer'); 


gulp.task('styles', function() { 
    gulp.src('./dev/sass/**/*.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(gulp.dest('./public/css/')); 
}); 

gulp.task('autoprefixer', function() { 
    return gulp.src('./dev/sass/**/*.scss') 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(gulp.dest('./public/css/')); 
}); 

//Watch task 
gulp.task('default',function() { 
    gulp.watch('./dev/sass/**/*.scss',['styles', 'autoprefixer']); 
}); 

Answer 1

你错过了在autoprefixer任务SASS编译。

应该

gulp.task('autoprefixer', function() { 
    return gulp.src('./dev/sass/**/*.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
     .pipe(gulp.dest('./public/css/')); 
}); 

Autoprefixer由在普通的CSS工作，并不会编译顶嘴。所以你必须在通过autoprefixer传递流之前自己做。