Компиляция LESS с использованием gulp-useref и gulp-less?

Я пытаюсь скомпилировать мои файлы LESS с помощью плагина gulp-useref, но это похоже на то, что плагин gulp-less никогда не выводит скомпилированную версию моих файлов LESS в конвейере. Файлы LESS объединяются с другими файлами CSS без компиляции.Компиляция LESS с использованием gulp-useref и gulp-less?

Я попытался скомпилировать свой LESS отдельно, используя только gulp-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 Creats поток для 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 файлы с менее компилятором (причина 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')); 
});

затем включить файл all.css genereted по gulp.task ('') Sass

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

источник

2016-12-20 15:45:11 zloctb

Компиляция LESS с использованием gulp-useref и gulp-less?

ответ

Смежные вопросы