伙计们,我在gulp文件中添加了Autoprefixer插件,一切正常,但CSS不会吐出自动前缀的CSS。我很乐意获得帮助。以下是我的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']);
我希望你们能通过这个帮助我:)
最佳答案
传递给config
的autoprefixer
是错误的。它应该是
.pipe(autoprefix({
browsers: ['last 2 versions']
}))
参考:gulp-autoprefixer
关于javascript - Autoprefixer在Gulpfile.js中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39888408/