Как совместить postcss/autoprefixer с LESS

У меня есть сайт, для которого я использую пользовательские таблицы стилей LESS, и они включают таблицы стилей Bootstrap LESS. Все это скомпилировано в окончательный style.css файл с style.css.map исходной картой.

Вот как выглядит мой Gulpfile:

var gulp = require('gulp');
var less = require('gulp-less-sourcemap');

var mySite = '.';

gulp.task('less', function () {
    gulp.src(mySite + '/css/**.less')
      .pipe(less())
      .pipe(gulp.dest(mySite + '/css'));
});

Теперь я хотел бы добавить autoprefixer. Это то, что я пробовал, но это не работает:

var gulp = require('gulp');
var less = require('gulp-less-sourcemap');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');

var mySite = '.';

gulp.task('less', function () {
    gulp.src(mySite + '/css/**.less')
      .pipe(less())
      .pipe(postcss([autoprefixer({ browsers: ['last 2 version'] })]))
      .pipe(gulp.dest(mySite + '/css'));
});

Это потому, что я передаю сгенерированные исходные карты в postcss, и он не может их обработать. Итак, я пробовал это:

var gulp = require('gulp');
var less = require('gulp-less-sourcemap');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');

var mySite = '.';

gulp.task('less', function () {
    gulp.src(mySite + '/css/**.less')
      .pipe(less())
      .pipe(postcss([autoprefixer({ browsers: ['last 2 version'] })]))
      .pipe(gulp.dest(mySite + '/css'));


    gulp.src(mySite + '/css/**.css')
      .pipe(postcss([autoprefixer({ browsers: ['last 2 version'] })]))
      .pipe(gulp.dest(mySite + '/css'));
});

Однако префиксы по-прежнему не добавляются. Может быть, это потому, что CSS Bootstrap уже имеет префикс, и это какая-то проблема для postcss?

Как заставить это работать?


gulp less autoprefixer
person Borek Bernard    schedule 10.12.2014    source источник
comment
Пробовали ли вы использовать без gulp, gulp-sourcemaps и gulp-autoprefixer вместо этого? Кажется, это хорошо работает для меня.   -  person Ben    schedule 10.12.2014
comment
Просто неправильно иметь два gulp-потока в одной задаче. После разделения моей единственной задачи less на less и autoprefix и создания зависимости autoprefix от less все работает нормально.   -  person Borek Bernard    schedule 10.12.2014
comment
Итак, вы решили, что ваша задача less записывает файлы css на диск, а затем ваша задача autoprefix читает файлы css с диска?   -  person Ben    schedule 10.12.2014
comment
Да. Кажется, что autoprefixer также обновляет исходные карты, так что все вроде бы хорошо.   -  person Borek Bernard    schedule 11.12.2014

Ответы (1)


arrow_upward
6
arrow_downward

Согласно ознакомлению с Gulp-Less,

Если вы используете версию 1.3.7 или выше, у вас будет возможность использовать растущий набор плагинов LESS, потенциально упрощая этапы сборки.

И код, который они предлагают использовать, будет выглядеть так.

var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});


gulp.src('./less/**/*.less')
  .pipe(less({
    plugins: [autoprefix]
  }))
  .pipe(gulp.dest('./public/css'));
person Kelly J Andrews    schedule 17.12.2014
comment
спасибо - это решило мою проблему после хорошего часа или двух поисков правильного решения re less x autoprefixing - person jimmyNames; 04.12.2020
comment
Рад, что это помогло @jimmyNames! - person Kelly J Andrews; 04.12.2020