CODEWITHSUNDEEP
csslessgulp
Robert McKee
Robert McKee

Reputation: 21487

gulp-sourcemap file extension issue

Trying to create a gulp file that picks up our LESS files and generates the appropriate .css, .min.css, and .css.map files. Close, but sourcemaps is writing the map to a file with the extension .css.min.css.

/// <vs BeforeBuild='less' SolutionOpened='less' />
/// <binding BeforeBuild='less' ProjectOpened='less' />
var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
var minifycss = require('gulp-minify-css');
var pleeease = require('gulp-pleeease');
var rename = require('gulp-rename');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var postcss = require('gulp-postcss');

var processors = [
        autoprefixer({ browsers: ["IE >= 9, firefox > 10, last 2 Chrome versions, last 2 safari versions, last 2 ios versions"] }),
        mqpacker
];
gulp.task('less', function () {
    gulp.src('./itims/Content/*.less', { base: './itims/content'})
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(postcss(processors))
        .pipe(rename({
            extname: '.css'
        }))
        .pipe(gulp.dest('./itims/content'))
        .pipe(minifycss())
        .pipe(sourcemaps.write('./'))
        .pipe(rename({
            suffix: '.min',
            extname: '.css'
        }))
        .pipe(gulp.dest('./itims/content'));
});

Upvotes: 0

Views: 326

Answers (1)

Michel
Michel

Reputation: 28259

As you might guess, your problem comes from the rename that is after the sourcemaps.write. You want to rename only *.css files, hence the following solution should do the trick :

  1. Add gulp-if to your dependencies if not already present

    var if = require('gulp-if');

  2. Rewrite your task as follows :

    gulp.src('./itims/content/*.less', {base: './itims/content'})
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(postcss(processors))
    .pipe(gulp.dest('./itims/content'))
    .pipe(minifycss())
    .pipe(sourcemaps.write('./'))
    .pipe(if('*.css', rename({extname: '.min.css'}))
    .pipe(gulp.dest('./itims/content'));

Notes:

  • I removed your first rename as the less plugin already handles the renaming of *.less to *.css
  • Beware of the case in the path names. You mixed './itims/Content' and './itims/content'.

Upvotes: 3

Related Questions