使用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？

回答

相關問題