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

我正在尝试使用gulp-useref插件编译我的LESS文件，但它好像没有吞没插件永远不会在管道中输出我的LESS文件的编译版本。 LESS文件与其他CSS文件串联而不被编译。使用gulp-useref和gulp-less编译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')); 
});

预先感谢解答！

来源

2014-12-23 joelrobichaud

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

与：

<!-- 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更少/ website.less的内容。由于您的流的名称是css/combined.css只有.pipe(gulpif('*.css', cssmin()))匹配。

如果使用.pipe(gulpif('*.css', less()))，那么编译器将把所有三个文件的内容编译到css/combined.css中。

所以，你可以使用：

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

上述命令编译您的* .css和用更少的编译器* .LESS文件（导致较少可以编译CSS，结果可能如预期）

来源

2014-12-27 21:22:25

尝试添加自定义类型

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

来源

2014-12-25 22:21:23

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'）

<link rel="stylesheet" href="css/all.css" >

genereted文件all.css

来源

2016-12-20 15:45:11 zloctb

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

回答

相关问题