我正在尝试使用gulp-useref插件编译我的LESS文件,但就好像gulp-less插件永远不会在管道中输出我的LESS文件的编译版本. LESS文件与其他CSS文件连接而不进行编译.
我尝试单独编译我的LESS,只使用gulp-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'));
});
提前谢谢你的答案！
解决方法
据我所知,你是不可能的.
有：
<!-- 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())),则较少的编译器会将所有三个文件的内容编译为css / combined.css.
所以你可以使用：
.pipe(gulpif('*.css',less()))
.pipe(gulpif('*.css',cssmin()))
上面使用Less编译器编译你的* .css和* .less文件(因为Less可以编译css,结果可能符合预期)