How to compile all . Less files into a single . css

Asked

Viewed 241 times

1

I’m trying to configure Gulp in my project but when I compile the . Less files it generates a new . css for each. Less, I wanted Gulp to compile all . Less and the result was just a "result.css". follow my current gulpfile.js below:

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

// Compiles less on to /css
gulp.task('less', function () {
  gulp.src('src/**/*.less')
    .pipe(plumber())
   .pipe(less())
   .pipe(gulp.dest('src'))
    .pipe(reload({stream:true}));
});

// reload server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});


// watch for changes on files
gulp.task('watch', function(){ 
  gulp.watch('src/**/*.less', ['less']);
  gulp.watch("*.html", ['bs-reload']);
}); 

// deploys
gulp.task('default',  ['less', 'watch', 'browser-sync']);
gulpjs

1 answer

1


I managed to solve my problem, quite simply, in the task I replaced . src with

gulp.src('src/main.less')

And on that main.Less I called the other files with @import

@import "home.less";
@import "variables.less";

The result was the two files compiled into a single file, main.css

Browser other questions tagged gulpjs

You are not signed in. Login or sign up in order to post.