Question

我的Autoprefixer没有为编译的CSS添加必要的前缀。我已阅读各种帖子，包括堆叠帖子，并尝试更改任务的顺序和变体，包括：

.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
})

这是我的GULP文件：

    var
            gulp         = require('gulp'),
            compass      = require('gulp-compass'),
            autoprefixer = require('gulp-autoprefixer'),
            concat       = require('gulp-concat'),
            notify       = require('gulp-notify'),
            livereload   = require('gulp-livereload'),
            plumber      = require('gulp-plumber'),
            path         = require('path');

        // the title and icon that will be used for the Grunt notifications
        var notifyInfo = {
            title: 'Gulp',
            icon: path.join(__dirname, 'gulp.png')
        };

        //error notification settings for plumber
        var plumberErrorHandler = { errorHandler: notify.onError({
                title: notifyInfo.title,
                icon: notifyInfo.icon,
                message: "Error: <%= error.message %>"
            })
        };

        // The default task (called when you run `gulp` from cli)
        gulp.task('default', ['watch']);

        // CSS
        gulp.task('css', function() {

            return gulp.src('./src/scss/**/*')
              .pipe(plumber(plumberErrorHandler))
              .pipe(compass({
                config_file: './src/config.rb',
                css: './css',
                sass: './src/scss'
              }))
              .pipe(autoprefixer('last 2 version'))      
              .pipe(gulp.dest('./css'));

        });

        // JS
        gulp.task('js', function() {
            var scripts = [
                './src/js/no-conflict.js',
                //'./node_modules/owl-carousel-2/owl.carousel.js',
                './src/js/jquery.fancybox.pack.js',
                './src/js/wow.js',
                './src/js/frontend.js'
            ];

            gulp.src(scripts)
                .pipe(concat('script.js'))
                .pipe(gulp.dest('./js'))
                .pipe(notify({ message: 'Successfully compiled JavaScript' }));

        });

        // Images
        gulp.task('images', function() {
        });

        // Fonts
        gulp.task('fonts', function() {
        });

        // Watch
        gulp.task('watch', function() {

            //livereload();

            //livereload.listen();

            // Watch .scss files
            gulp.watch('./src/scss/**/*.scss', ['css']);

            // Watch .js files
            gulp.watch('./src/js/**/*.js', ['js']);

            // Reload when template file, css or js file changes
            var watchlist = [
                './css/style.css',
                './js/frontend.js'
            ];

            gulp.watch(watchlist, function(event) {
                gulp.src(event.path)
                    .pipe(plumber())
                    .pipe(livereload())
                    .pipe(notify({
                            title: notifyInfo.title,
                            icon: notifyInfo.icon,
                            message: event.path.replace(__dirname, '').replace(/\\/g, '/') + ' was ' + event.type + ' and reloaded'
                        })
                    );
            });
        });

有人可以指出我正确的方向吗？

Answer 1

您的设置看起来正确无误。你在运行什么版本的autoprefixer？我认为“gulp-autoprefixer”：“^ 3.1.0”，是最新的。你有没有尝试过评论：

.pipe(plumber(plumberErrorHandler))
              .pipe(compass({
                config_file: './src/config.rb',
                css: './css',
                sass: './src/scss'
              }))

然后重新运行你的任务？

尝试安装节点模块cssnano，然后给它一个去：

gulp.task('styles', () => {
  return gulp.src('./src/scss/**/*')
    .pipe(sass({style: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer('last 4 version'))
    .pipe(cssnano({
      convertValues: {
        length: false
      },
      discardComments: {
        removeAll: true
      }
    }))
    .pipe(gulp.dest('./css'))
});

Gulp Autoprefixer没有加前缀

1 个答案: