W
W
westwood2014-12-12 11:48:34
Less
westwood, 2014-12-12 11:48:34

How to configure gulp-less?

src:

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

bld
  • - css
  • -img
  • -js

How to correctly build less files that are located in the less/blocks folder and still have imports in the syntax ( import "../mixin/reset" ) in bld/css/main.css?
I did the js minification, I also compiled a sprite, but a question arose with the loess. Attached is 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',
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 the question

In order to leave comments, you need to log in

2 answer(s)
V
Vladimir Gomonov, 2014-12-12
@MetaDriver

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

Something like this.
ps If the sequence of files when merging is important, see another plugin: "gulp-order" in the gulp-repository

A
aen, 2014-12-12
@aen

You are missing one step. You need to either create another file with block imports and build it in css, or build each file separately and then merge them into one. Which one is more convenient for you - choose for yourself.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question