Compilando MENO usando gulp-useref e gulp-less?

Question

Sto provando a compilare i miei file LESS usando il plugin gulp-useref, ma è come se il plugin senza gulp non emettesse mai una versione compilata dei miei file LESS nella pipeline. I file LESS vengono concatenati con gli altri file CSS senza essere compilati.

Ho provato a compilare il mio LESS separatamente usando solo gulp-less e funziona bene, ma non ho idea del motivo per cui sembra in conflitto con il plugin gulp-useref.

Ecco il mio 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')); 
}); 

Grazie in anticipo per le risposte!

Answer 1

Per quanto ho capito è quello che non si tenta possibile.

con:

<!-- 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 un flusso di css/combined.css che contiene il contenuto di css/one.css, css/two.css meno/website.less. A causa del nome del tuo stream è css/combined.css solo le partite .pipe(gulpif('*.css', cssmin())).

Se si utilizza .pipe(gulpif('*.css', less())), meno compilatore compilerà il contenuto di tutti e tre i file in css/combined.css.

Così si può utilizzare:

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

Le compilazioni di cui sopra sia la vostra * css e file * .less con il compilatore Meno (causa meno può compilare css, il risultato potrebbe come previsto)

Answer 2

tenta di aggiungere tipo personalizzato

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

quindi include file all.css genereted da gulp.task ('sass')

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