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.
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.
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 :-
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”:
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).
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'))
);
});
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'));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With