Как сконфигурировать gulp-less?

Question

[westvud]

src:

• img
• js
• less
  • block
    • block1.less
    • bliock2.less
  • mixin
    • reset.less
    • clearfix.less

bld

• - css
• - img
• - js

Как правильно собрать less файлы, которые расположены в папке less/blocks и еще имеющим в синтаксисе импорты ( import "../mixin/reset" ) в bld/css/main.css?

Минификациию js сделала, спрайт тоже составила, а с лессом возник вопрос. Прилагаю gulpfile.js

gulp.task('compressImg', function() {
gulp.src('./src/img/before')
.pipe(imagemin({
optimizationLevel: 8,
progressive: true,
interlaced: true
}))
.pipe(size({
title: 'size of images'
}))
.pipe(gulp.dest('./src/img/after'));
});

gulp.task('sprite', function () {
var spriteData =
gulp.src('./src/img/before/*')
.pipe( spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.less',
cssFormat: 'less',
algorithm: 'binary-tree',
cssTemplate: 'src/mustache/less.template.mustache',
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite.name
}
})
);
spriteData.img
.pipe(gulp.dest(paths.bldImg));

spriteData.css
.pipe(gulp.dest(paths.srcLess));
});

gulp.task('script', function() {
gulp.src(paths.script)
.pipe(concat('script.js'))
.pipe(rename('script.min.js'))
.pipe(uglify())
.pipe(gulp.dest(paths.bldJs));
});

gulp.task('less', function () {
gulp.src('./src/less/**/*.less')
.pipe(less())
.pipe(gulp.dest('./bld/css'));
});

Answer 1

[Владимир Гомонов]

.....
var concat = require('gulp-concat'),  // объединяет файлы в один бандл
   minifyCSS = require('gulp-minify-css'),  // сжимает, оптимизирует
   rename = require("gulp-rename");  // переименовывает
....
gulp.task('less', function () {
gulp.src('./src/less/**/*.less')
.pipe(less())
.pipe(concat('common.css'))
.pipe(minifyCSS())   
.pipe(rename({suffix: ".min"}))
.pipe(gulp.dest('./bld/css'));
});

Как-то так.
p.s. Если важна последовательность файлов при склейке, см. ещё плагин: "gulp-order" в галп-реппозитории

Comments

[Aleksey Filippov]

Можно указать последовательность вручную, используя массив как параметр для gulp.src():

...
gulp.src([
    'assets/styles/less/reset.less',
    'assets/styles/less/grid.less',
    'assets/styles/less/buttons.less',
    // ...
])
...

Если файлов не много, то вполне можно обойтись без gulp-order.
Вопрос-ответ по конкатенации по заданному порядку ...

[Владимир Соломыкин]

Подключай gulp-cssimport
Я тоже пару дней искал варианты - как все стили нормально импортировать и выгрузить

Answer 2

[aen]

Вам не хватает одного шага. Нужно или создать еще один файл с импортами блоков и уже его билдить в css, или билдить каждый файл по отдельности и потом их уже склеивать в один. Какой удобнее вам - выбирайте сами.