Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

gulp

gulp-less

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.

like image 758
Steve Avatar asked May 12 '14 15:05

Steve


People also ask

What is gulp and how do I use it?

The ones I’m including in the gulp file are the most common basic usages of Gulp: Process my SASS into CSS, clean the CSS, minify the files, and combine my files into one. I’ll be using the last two on my javascript files as well.

What is the use of NPM gulp?

Gulp is generally known as build tool where we define single or multiple tasks at a time which help us to perform multiple activities at a time There are thousands of npm packages available on npm one of the important package we will try to use today is GULP We need to install node.js and then we will install npm after then follow these steps :-

How do I run a gulp task from a specific folder?

A Gulp tasks is set up simply: gulp.task (‘name’, functionThatHappensWhenYouRunThis ()); The “.pipe” combines a series of events. In the styles task, I take the files under the SASS folder (style.scss) and run three “pipes”:

How do I watch a gulp file in Linux?

Instead, when we’re ready to start coding in this project, we simply open up the console, navigate to the root folder (or wherever the gulpfile.js is in our file structure), and type in “gulp watch”. It will continuously watch for changes until we stop it (type Command-C).


1 Answers

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'));
});
like image 136
Florent Avatar answered Oct 29 '22 17:10

Florent