3

我有一个使用自定义 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？

如何使这项工作？

4

1 回答 1

6

根据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'));
于 2014-12-17T15:36:28.807 回答