Eliksir Laravel i autoprefixer

Question

Widziałem więc, że eliksir automatycznie nie używa autoprefiksu. Oto, jak wygląda mój plik z łykiem:

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

}); 

Ale to nie jest automatyczne wysyłanie autoprefiksu. Nie dostaję żadnych błędów. A kiedy uruchamiam gulp watch, nie aktualizuje się, gdy aktualizuję plik .scss. Wszystkie moje pliki sass znajdują się pod zasobami/sass

Dzięki za pomoc!

Próbowałem nawet:

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

Twój gruntfile.js powinna wyglądać następująco:

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

Plik resources/assets/sass/app.scss powinna wyglądać następująco:

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

Będziesz mieć teraz struktura katalogów w następujący sposób:

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 

Gwiazdki będą [a-z0-9]{10} ale można załadować je poprzez wywołanie {{ elixir('css/app.css') }} i {{ elixir('js/app.js') }}.

Answer 2

Chociaż currentlyundocumented, laravel Elixir rzeczywiście działa CSS przez Autoprefixer, ze to w większości domyślnych ustawień, gdyż znajduje się w pakiecie na Config.js:

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

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

Aby dostosować tę konfigurację, należy użyć następujących:  

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

Użyj tej konfiguracji

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

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