I'm trying to compile my LESS files using the gulp-useref plugin, but it is as if the gulp-less plugin never outputs a compiled version of my LESS files in the pipeline. The LESS files get concatenated with the other CSS files without being compiled.
I tried compiling my LESS separately using only gulp-less and it is working well, but I have no idea why it seems to conflict with the gulp-useref plugin.
Here is my 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'));
});
Thanks in advance for answers!
As far as i understand is what you try not possible.
with:
<!-- 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 a stream for css/combined.css which contains the content of css/one.css, css/two.css less/website.less. Because of the name of your stream is css/combined.css
only the .pipe(gulpif('*.css', cssmin()))
matches.
If you use .pipe(gulpif('*.css', less()))
, the less compiler will compile the content of all three files into css/combined.css.
So you can use:
.pipe(gulpif('*.css', less()))
.pipe(gulpif('*.css', cssmin()))
The above compiles both your *.css and *.less files with the Less compiler (cause Less can compile css, the result may as expected)