ララールエリキシルとオートプレフィックタ

Question

私は、エリクシールが自動的にオートプレフィックタを使用していないのを見ました。これは、私の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' 
    ]); 

}); 

しかし、それはまだオートプレフィックタを発行していません。私はギャルのエラーを取得しません。 gulp watchを実行すると、.scssファイルを更新するたびに更新されません。すべての私のファイルはリソース/サスの下にあります

ありがとうございました！

私も試してみました：

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

undocumentedcurrentlyものの、パッケージのConfig.jsに見られるように、それは、ほとんどがデフォルトの設定だとLaravelのエリクサーは確かに、Autoprefixerを通して、あなたのCSSを実行します：

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

012この設定を使用します