使用gulp编译LESS
我正在尝试使用gulp-useref插件编译我的LESS文件，但它似乎没有吞没我的LESS文件在管道中的编译版本。 LESS文件与其他CSS文件串联而不被编译。
我试着只编译我的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，结果可能如预期的那样）
尝试添加自定义类型
var assets = useref.assets({
searchPath: '.',
types: ['js', 'css', 'less']
});
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat= require('gulp-concat');
var minifyCss = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var pump = require('pump');
var useref = require('gulp-useref');
gulp.task('sass', function(){
gulp.src(['css/**/*.scss' ,'css/**/*.css' ])
.pipe(sass()) // Using gulp-sass
.pipe(minifyCss())
.pipe(concat('all.css'))
.pipe(gulp.dest('build/css'))
});
gulp.task('compressJS', function (cb) {
return gulp.src(['lib/*.js'])
.pipe(concat('concat.js'))
.pipe(uglify())
.pipe(gulp.dest('build/js'))
});
var gulp = require('gulp'),
useref = require('gulp-useref');
gulp.task('default', ['sass'] , function () {
//нема
return gulp.src('*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));
});
然后包含由gulp.task（'sass'）生成的all.css文件
<link rel="stylesheet" href="css/all.css" >