Эликсир Laravel и автопрефиксер

Итак, я увидел, что elixir не использует автопрефиксер автоматически. Вот как выглядит мой файл 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. Все мои файлы sass находятся в папке resources/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');

laravel gulp autoprefixer gulp-sass laravel-elixir
person HaleyBuggs    schedule 10.09.2015    source источник
comment
Поскольку Bootstrap 4 уже скомпилировал CSS, почему бы просто не включить его? В противном случае вместо создания новой задачи можно использовать функцию mix.sass(). Laravel Elixir автоматически использует autoprefixer, если вы не отключите его. См. следующий Gulpfile.js пример: gist.github.com/divspace/3f952754581babb21c5b   -  person Kyle Anderson    schedule 24.10.2015
comment
Мне нравится, когда документы Laravel оставляют нас в покое. По Autoprefixer нет никакой документации, но я попросил об этом в #372.   -  person igorsantos07    schedule 05.12.2015

Ответы (3)


arrow_upward
11
arrow_downward

Хотя в настоящее время недокументировано, Эликсир Laravel действительно запускает ваш CSS через 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) {
    ...
});
person igorsantos07    schedule 04.12.2015

arrow_upward
5
arrow_downward

использовать эти конфигурации

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

elixir(function(mix) {
    mix.sass('index.scss');
});
person naoufal bardouni    schedule 15.06.2016

arrow_upward
-2
arrow_downward

Ваш 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') }}.

person Kyle Anderson    schedule 26.10.2015
comment
ты отвечаешь на вопрос или пытаешься научить парня правильной разметке? - person igorsantos07; 05.12.2015