Search code examples
gulpgulp-less

How to have Gulp LESS only output main file, ignoring includes?


I have a folder full of LESS files in my app folder. There a 2 main files and several includes, all of which are prefixed with "_". I want to only output those 2 files and their sourcemaps to my build folder, but of course the default setup outputs ALL the less files:

var gutil = require('gulp-util');
var changed = require('gulp-changed');
var path = require('path');
var less = require('gulp-less-sourcemap');

gulp.task('less', function() {
  gulp.src('./app/less/*.less')
     .pipe(less({
        generateSourceMap: true, // default true
        paths: [path.join(__dirname, 'less', 'includes')]
    }))
    .pipe(gulp.dest('./build/css'));
});

I suppose I could put my includes in a sub-directory, but I'd rather not have to edit the LESS if I didn't have to.

UPDATE

I know how to specify a single file in gulp.src but I have 2 LESS file that need to be made into 2 CSS files each with its own map.


Solution

  • Solution 1:

    Use event-stream.

    gulp.task('less', function(cb) {
      var lessc = less({
        paths: [path.join(__dirname, 'less', 'includes')]
      });
      return es.merge(
        gulp.src('app/less/main.less')
          .pipe(lessc)
          .pipe(gulp.dest('build/css')),
        gulp.src('app/less/theme.less')
          .pipe(lessc)
          .pipe(gulp.dest('build/css'))
      );
    });
    

    Solution 2:

    Create 2 tasks.

    gulp.task('less', ['less:main', 'less:theme']);
    gulp.task('less:main', function() {
      return gulp.src('./app/less/main.less')
        .pipe(less({ paths: [path.join(__dirname, 'less', 'includes')] }))
        .pipe(gulp.dest('./build/css'));
    });
    gulp.task('less:theme', function() {
      return gulp.src('./app/less/theme.less')
        .pipe(less({ paths: [path.join(__dirname, 'less', 'includes')] }))
        .pipe(gulp.dest('./build/css'));
    });