gulpgulp-lessgulp-sourcemaps

Compile less and output minify and non-minify files


I have a task in Gulp that compile a less file in css. I want to output the non-minify and the minify version with sourcemaps. I can't find a soluction. This is my actual task that should do this job:

return gulp.src(['./src/less/main.less'])
.pipe(sourcemaps.init())
.pipe(less({
    paths: ['node_modules'],
}))
.pipe(sourcemaps.write('.'))
.pipe(cssnano())
.pipe(rename(function (path) {
    console.log(path);
    path.basename = path.basename.split('.')[0] + '.min' + (path.basename.split[1] || ''); //to change the name from main.css to main.min.css
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css/'));

I get an error because cssnano want minify the map file. Can someone post his complete task with that feature?

Thank you in advance!


Solution

  • Something like this using 'gulp-clone' package:

    var files = gulp.src(['./src/less/main.less']);
    
    files
      .pipe(clone())
      .pipe(sourcemaps.init())
      .pipe(less())
      .pipe(cssnano())
      .pipe(sourcemaps.write('.'));
    
    files
      .pipe(sourcemaps.init())
      .pipe(less())
      .pipe(sourcemaps.write('.'));