Kompilowanie MNIEJ za pomocą gulp-useref i bez łyka?

Question

Próbuję skompilować moje pliki LESS za pomocą wtyczki gulp-useref, ale wygląda na to, że plugin bez luki nigdy nie wypuszcza skompilowanej wersji moich plików LESS w potoku. Pliki LESS łączą się z innymi plikami CSS bez kompilacji.

Próbowałem kompilować moje LESS osobno za pomocą tylko bez wdychania i działa dobrze, ale nie mam pojęcia, dlaczego wydaje się być w konflikcie z wtyczką gulp-useref.

Oto moja 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')); 
}); 

Dzięki z góry za odpowiedzi!

Answer 1

O ile mi zrozumieć to, czego nie spróbować możliwe.

z:

<!-- 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 creats strumień CSS/combined.css zawierający treść CSS/one.css, Css/two.css mniej/website.less. Ze względu na nazwę Twojego strumienia css/combined.css pasuje tylko do .pipe(gulpif('*.css', cssmin())).

Jeśli użyjesz .pipe(gulpif('*.css', less())), mniej kompilator skompiluje zawartość wszystkich trzech plików do css/combined.css.

Więc można użyć:

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

Powyższe kompiluje zarówno swoją * .css i * .less pliki z kompilatora Less (Mniej może powodować skompilować css, wynik może zgodnie z oczekiwaniami)

Answer 2

Spróbuj dodać niestandardowy typ

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

Answer 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')); 
}); 

następnie zawierać plik all.css wygenerowano gulp.task Sass ('')

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