使用gulp-useref和gulp-less编译LESS？

Question

我正在尝试使用gulp-useref插件编译我的LESS文件,但就好像gulp-less插件永远不会在管道中输出我的LESS文件的编译版本.LESS文件与其他CSS文件连接而不进行编译.

我尝试仅使用gulp-less单独编译我​​的LESS并且它运行良好,但我不知道为什么它似乎与gulp-useref插件冲突.

这是我的gulpfile:

var gulp = require('gulp');
var rm = require('gulp-rimraf');
var gulpif = require('gulp-if');
var less = require('gulp-less');
var cssmin = require('gulp-minify-css');
var useref = require('gulp-useref');

gulp.task('clean', function () {
    return gulp.src(['public'])
        .pipe(rm({force: true}));
});

gulp.task('refs', ['clean'], function () {
    var assets = useref.assets({searchPath: '.'});

    return gulp.src(['templates/**/*.html'])
        .pipe(assets)
        .pipe(gulpif('*.less', less()))
        .pipe(gulpif('*.css', cssmin()))
        .pipe(assets.restore())
        .pipe(gulpif('*.html', useref()))
        .pipe(gulp.dest('public/templates'));
});

提前谢谢你的答案!

Answer 1

据我了解，你尝试的是不可能的。

和：

<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/less" href="less/website.less" />
<!-- endbuild -->

useref.assets 为 css/combined.css 创建一个流，其中包含 css/one.css、css/two.css less/website.less 的内容。因为您的流的名称css/combined.css只是.pipe(gulpif('*.css', cssmin()))匹配项。

如果使用 .pipe(gulpif('*.css', less()))，则 less 编译器会将所有三个文件的内容编译为 css/combined.css。

所以你可以使用：

    .pipe(gulpif('*.css', less()))
    .pipe(gulpif('*.css', cssmin()))

上面使用Less编译器编译了*.css和*.less文件（因为Less可以编译css，结果可能如预期）