Question

我有一个网站，我使用自定义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'));
});

但是，仍未添加前缀。也许是因为Bootstrap的CSS已经加了前缀，而且postcss会出现问题吗？

如何使这项工作？

Answer 1

根据Gulp-Less Readme，

如果您使用的是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'));

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

1 个答案: