Laravel elixir和autoprefixer

Question

所以我看到elixir不會自動使用autoprefixer。這是我的吞嚥文件看起來如何：

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文件都位於資源/ 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

你gruntfile.js應該是這樣的：

var elixir = require('laravel-elixir'); 

elixir(function(mix) { 
    mix 
    .copy('./public/vendor/bootstrap-4', './node_modules/bootstrap-4') 
    .sass('app.scss') 
    .scripts([ 
     './node_modules/bootstrap-4/dist/js/bootstrap.js' 
     './node_modules/vue/dist/vue.js' 
    ], './public/js/app.js') 
    .version([ 
     'css/app.js', 
     'js/app.css' 
    ]); 
}); 

你resources/assets/sass/app.scss文件應該是這樣的：

@import "node_modules/bootstrap-4/scss/bootstrap"; 

你現在有一個目錄結構如下：

個

public/build/css/app-**********.css 
public/build/css/app.css.map 
public/build/js/app-**********.js 
public/build/js/app.js.map 
public/css/app.css 
public/css/app.map 
public/js/app.js 
public/js/app.map.js 

星號將是[a-z0-9]{10}但你會通過調用{{ elixir('css/app.css') }}和{{ elixir('js/app.js') }}加載它們。

Answer 2

雖然currentlyundocumented，Laravel的藥劑確實通過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) { 
    ... 
}); 

Answer 3

使用這種配置

var elixir = require('laravel-elixir'); 
config.css.autoprefix.options.browsers = ['last 15 versions'] ; 

elixir(function(mix) { 
    mix.sass('index.scss'); 
});