如何将postcss/autoprefixer与LESS结合起来

Question

我有一个网站,我使用自定义LESS样式表,它们包括Bootstrap LESS样式表.它全部style.css使用style.css.mapsourcemap 编译到最终文件.

这就是我的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'));
});

但是,仍未添加前缀.也许是因为Bootstrap的CSS已经加上前缀并且它在某种程度上是一个问题postcss？

如何使这项工作？

Answer 1

根据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'));