Laravel Elixir 和自动前缀器

Question

所以我看到 Elixir 不会自动使用 autoprefixer。这是我的 gulp 文件的样子:

var Elixir = require('laravel-elixir');
var autoprefixer = require('gulp-autoprefixer');
var gulp = require('gulp');

Elixir.config.sourcemaps = false;

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

Elixir(function(mix) {

    // Copy bootstrap.min.js to node vendor directory until it becomes a node module
    mix.copy('public/vendor/bootstrap-4', 'node_modules/bootstrap-4');

    // Combine all vendor scripts
    mix.scripts([
        'bootstrap-4/dist/js/bootstrap.min.js',
        'vue/dist/vue.min.js'
    ], 'public/js/vendor.js', 'node_modules');

    // Combine all files into one single CSS file
    mix.task('sass', 'resources/sass/**/*.scss');

    // Get rid of cached version
    mix.version([
        'public/js/vendor.js',
        'public/css/app.css'
    ]);

});

但它仍然没有发出 autoprefixer。我没有收到任何错误。当我运行 gulp watch 时，每当我更新 .scss 文件时它都不会更新。我所有的 sass 文件都位于 resources/sass 下

感谢您的帮助!

我什至尝试过:

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

Answer 1

虽然currently undocumented ，Laravel 的 Elixir 确实通过 Autoprefixer 运行你的 CSS，它主要是默认设置，如包的 Config.js 中所示。 :

{
    ...
    css: {
        autoprefix: {
            enabled: true,

            options:  {
                browsers: ['last 2 versions'],
                cascade: false
            }
        },
    }
}

要自定义该配置，您应该使用以下内容:

elixir.config.css.autoprefix = {
    enabled: true, //default, this is only here so you know how to disable
    options: {
        cascade: true,
        browsers: ['last 2 versions', '> 1%']
    }
};

elixir(function(mix) {
    ...
});