Gulpfile.js

Question

傢伙裏面Autoprefixer不工作我添加Autoprefixer插件我一口裏面的文件，一切工作正常，但CSS不會吐出autoprefixed css.I會很樂意讓help.Below是我gulpfile.js：

// require gulp 
 
var gulp = require('gulp'); 
 

 
// require other packages 
 
var concat = require('gulp-concat'), 
 
    cssmin = require('gulp-minify-css'), 
 
    rename = require("gulp-rename"), 
 
    sass = require('gulp-sass'), 
 
    browserSync = require('browser-sync'), 
 
    uglify = require('gulp-uglify'), 
 
    changed = require('gulp-changed'), 
 
    imagemin = require('gulp-imagemin'), 
 
    autoprefix = require('gulp-autoprefixer'); 
 

 
// scripts task 
 
gulp.task('scripts', function() { 
 
    return gulp.src('./src/js/*.js') 
 
    .pipe(concat('app.js')) 
 
    .pipe(gulp.dest('./dist/js/')) 
 
    .pipe(uglify()) 
 
    .pipe(rename({ 
 
     suffix: '.min' 
 
    })) 
 
    .pipe(gulp.dest('./dist/js/')); 
 
}); 
 

 
// styles task 
 
gulp.task('styles', function() { 
 
    return gulp.src('./src/sass/*.scss') 
 
    .pipe(autoprefix('last 2 versions')) 
 
    .pipe(sass()) 
 
    .pipe(gulp.dest('./dist/css/')) 
 
    .pipe(cssmin()) 
 
    .pipe(rename({ 
 
     suffix: '.min' 
 
    })) 
 
    .pipe(gulp.dest('./dist/css/')); 
 
}); 
 

 
// browser sync 
 
gulp.task('browser-sync', ['styles'], function() { 
 
    browserSync({ 
 
     server: { 
 
      baseDir: '' 
 
     }, 
 
     notify: false 
 
    }); 
 
    gulp.watch("./src/sass/*.scss", ['scss']); 
 
    gulp.watch("*.html").on('change', browserSync.reload); 
 
}); 
 

 
// watch task 
 
gulp.task('watch', function() { 
 
    gulp.watch('./src/js/*.js', ['scripts']); 
 
    gulp.watch('./src/sass/*.scss', ['styles']); 
 
}); 
 

 
// image minification 
 
gulp.task('imagemin', function() { 
 
    var imgSrc = './src/img/**/*', 
 
     imgDst = './dist/img'; 
 

 
    gulp.src(imgSrc) 
 
    .pipe(changed(imgDst)) 
 
    .pipe(imagemin()) 
 
    .pipe(gulp.dest(imgDst)); 
 
}); 
 

 
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);

我希望你們能幫助我通過這個:)

Answer 1

的config傳遞給autoprefixer是錯誤的。它應該是

.pipe(autoprefix({ 
     browsers: ['last 2 versions'] 
    })) 

參考：gulp-autoprefixer

Answer 2

嘗試初始化autoprefixer後創建CSS。

Autoprefixer對css進行更改。它不能處理sass文件。

---

UPDATE

之前複製新gulpfile.js，添加在您的控制檯CMD項目路徑上

npm install gulp-postcss autoprefixer es6-promise --save-dev 

然後新gulpfile.js配置與autoprefixer複製

// require gulp 
var gulp = require('gulp'); 

// require other packages 
var concat = require('gulp-concat'), 
    cssmin = require('gulp-minify-css'), 
    rename = require("gulp-rename"), 
    sass = require('gulp-sass'), 
    browserSync = require('browser-sync'), 
    uglify = require('gulp-uglify'), 
    changed = require('gulp-changed'), 
    imagemin = require('gulp-imagemin'); 
    // autoprefix = require('gulp-autoprefixer'); -- comment this line 

// scripts task 
gulp.task('scripts', function() { 
    return gulp.src('./src/js/*.js') 
    .pipe(concat('app.js')) 
    .pipe(gulp.dest('./dist/js/')) 
    .pipe(uglify()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest('./dist/js/')); 
}); 

// styles task 
gulp.task('styles', function() { 
    return gulp.src('./src/sass/*.scss') 
    // .pipe(autoprefix('last 2 versions')) -- comment this line 
    .pipe(sass()) 
    .pipe(gulp.dest('./dist/css/')) 
    .pipe(cssmin()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest('./dist/css/')); 
}); 

// ========================================= 
// Start - Add packages/new configurations 

require('es6-promise').polyfill(); 
var postcss  = require('gulp-postcss'); 
var autoprefixer = require('autoprefixer'); 

gulp.task('autoprefixer', function() { 

    return gulp.src(
      ['.dist/css/*.css', '!.dist/css/*.min.css'] 
    ) 
     .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ])) 
     .pipe(gulp.dest('.dist/css/')); 
}); 

// ========================================= 
// End new lines 

// browser sync 
gulp.task('browser-sync', ['styles'], function() { 
    browserSync({ 
     server: { 
      baseDir: '' 
     }, 
     notify: false 
    }); 
    gulp.watch("./src/sass/*.scss", ['scss']); 
    gulp.watch("*.html").on('change', browserSync.reload); 
}); 

// watch task 
gulp.task('watch', function() { 
    gulp.watch('./src/js/*.js', ['scripts']); 
    gulp.watch('./src/sass/*.scss', ['styles']); 
}); 

// image minification 
gulp.task('imagemin', function() { 
    var imgSrc = './src/img/**/*', 
     imgDst = './dist/img'; 

    gulp.src(imgSrc) 
    .pipe(changed(imgDst)) 
    .pipe(imagemin()) 
    .pipe(gulp.dest(imgDst)); 
}); 

gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']); 

之後，在你的CMD控制檯

gulp autoprefixer 

---

問候:)