Less CSS - 在开发环境中添加带有 less.js 的供应商前缀答案

【问题标题】：Less CSS - Add vendor prefixes with less.js in development environmentLess CSS - 在开发环境中添加带有 less.js 的供应商前缀
【发布时间】：2015-06-22 08:50:36
【问题描述】：

我正在使用 LESS 和 Gulp。我还使用了Autoprefixer plugin，它基于Browserlist 添加了所有需要的供应商前缀。在为最终导出创建所有缩小文件时，这非常有用。

我的问题是：当我在开发环境中使用 less.js 测试 CSS 时，没有添加供应商前缀。似乎自动前缀仅适用于 cli。 有没有办法使用 less.js 或其他插件即时添加供应商前缀？我已经尝试在 less 之后运行 prefixfree。 js 但没有运气。

【问题讨论】：

我建议也使用 Gulp 编译 LESS 以进行开发（观察 .less 文件的更改，自动重新编译 + 自动前缀，实时重新加载页面）。这样您就可以在没有 less.js 开销的情况下运行您的开发，并使用将用于生产的相同版本的 LESS 进行编译。
@pawel 我想我会采用这个解决方案。即使在开发过程中，从 less.js 中移除开销也许是件好事。您可以将其发布为答案吗？

标签： css less vendor-prefix

【解决方案1】：

只需将来自gulp-less 的流通过管道传输到自动前缀器，例如

gulp.task('styles', [], function () {
    return gulp.src('less/*.less')
        .pipe(gulplLss())
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest('css/'));
}

gulp.task('watch', function () {
    gulp.watch('less/*.less', 'styles');
}

（这是通过postcss 工具使用自动前缀，现在推荐的方式。在弃用之前，自动前缀行应该是：.pipe(autoprefixer())）

【讨论】：

我实际上是这样使用它的：var plugins = [autoprefix, cleancss]; 然后gulp.pipe(less({ plugins: plugins }))。这是错误的还是不推荐使用的方式，因为它目前运行良好。 :)
哦，我其实不知道那个。我仍然更喜欢为一项工作使用一个 gulp 插件，它可以更好地控制正在发生的事情。看起来:)

【解决方案2】：

有一个纯粹的前端解决方案（如果它是您正在寻找的）。 Autoprefixer 可以在浏览器环境中运行。您不必将其作为 Less 插件运行。

在estFiddle 中，我在将 Less 编译成 CSS 后运行 Autoprefixer，它可以工作。（可以看源码here。）

【讨论】：