Laravel Elixier und Autoprefixer

Question

So sah ich, dass Elixier Autoprefixer nicht automatisch verwendet. So sieht meine Schluckdatei aus:

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' 
    ]); 

}); 

Aber es gibt immer noch nicht autoprefixer aus. Ich bekomme keine Schluckfehler. Und wenn ich gulp watch ausführen, wird es nicht aktualisiert, wenn ich eine .scss-Datei aktualisiere. Alle meine Sass-Dateien befinden sich unter Ressourcen/Sass

Vielen Dank für jede Hilfe!

Ich habe sogar versucht:

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

Ihre gruntfile.js sollte wie folgt aussehen:

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' 
    ]); 
}); 

Ihre resources/assets/sass/app.scss Datei sollte wie folgt aussehen:

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

Sie werden jetzt eine haben Verzeichnisstruktur wie folgt:

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 

Die Sternchen werden [a-z0-9]{10} sein, aber Sie werden sie laden, indem {{ elixir('css/app.css') }} und {{ elixir('js/app.js') }} aufrufen.

Answer 2

Obwohl currentlyundocumented, Laravel Elixier läuft in der Tat Ihre CSS durch Autoprefixer, damit meist Standardeinstellungen ist, gefunden, wie im Paket ist Config.js:

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

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

, dass die Konfiguration anzupassen, können Sie die folgenden verwenden sollten:  

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

Verwendung dieser Konfigurationen

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

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