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

【问题标题】：Compiling LESS using gulp-useref and gulp-less?使用 gulp-useref 和 gulp-less 编译 LESS？
【发布时间】：2014-12-23 21:01:58
【问题描述】：

我正在尝试使用 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'));
});

提前感谢您的回答！

【问题讨论】：

标签： javascript less gulp gulp-less

【解决方案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.cssless/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，结果可能符合预期）

【讨论】：

【解决方案2】：

尝试添加自定义类型

var assets = useref.assets({
   searchPath: '.', 
   types: ['js', 'css', 'less']
});

【讨论】：

【解决方案3】：

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" >

【讨论】：