लैरवेल एलिक्सिर और ऑटोप्रिफ़िक्सर

Question

तो मैंने देखा कि elixir स्वचालित रूप से ऑटोप्रिफ़िक्सर का उपयोग नहीं करता है। इस प्रकार मेरी गल्प फ़ाइल दिखती है:

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

हालांकि currentlyundocumented, Laravel के अमृत वास्तव में Autoprefixer के माध्यम से अपने सीएसएस चलाता है, के साथ यह ज्यादातर डिफ़ॉल्ट सेटिंग्स है, के रूप में में पैकेज 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'); 
});