我正在尝试使用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,结果可能符合预期)