How to create a source file back to source inactive files from a thumbnail CSS file?

Question

I am working with Gulp.js and I am having difficulty trying to get gulp -sourcemaps to point everything back to the smaller source files after I do the thumbnail step.

Since gulp -minify-css does not support sourcemaps, I use postcss and csswring.

Ideally, I would like to:

• ss.css (unminified)
• ss.css.map (pointing with ss.css back to the source .less files)
• ss.min.css (minified)
• ss.min.css.map (pointing with ss.min.css back to the original .less files)

Currently, I stop trying to output both mini and non-minified versions, but even getting a mini version to return to the source inactivity files does not work.

Without making a minimization step, my .map file works fine and looks like this:

{"version":3,"sources":["ss.less"],"names":[],"mappings":";AAEA;...

, , CSS, :

{"version":3,"sources":["ss-min.css"],"names":[],"mappings":";AAEA;...

gulpfile.js:

var csswring = require('csswring'),
    gulp = require('gulp'),
    less = require('gulp-less'),
    path = require('path'),
    postcss = require('gulp-postcss'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps');

var sourceLess = path.join(__dirname, 'app', 'assets', 'less');
var targetCss = path.join(__dirname, 'app', 'assets', 'css');

// Compile Less to CSS and then Minify, Include Sourcemaps
gulp.task('less-and-minify-css', function () {
    return gulp.src(lessFiles)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(rename({suffix: "-min"}))
        .pipe(postcss([csswring]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(targetCss));
});

, !

.css , , , .

Answer 1

, , - .

, , "file.css.min.map" "file.min.css.map", .

gulpif, csswring.

gulp.task('less-css-and-minify', function () {
    return gulp.src(lessFiles)
       .pipe(sourcemaps.init())
       .pipe(less())
       .pipe(gulpif('**/*.css', postcss([csswring])))
       .pipe(rename(function (path) {
          if (path.extname === '.map') {
             path.basename = path.basename.replace('.css', '.min.css');
          }
          if (path.extname === '.css') {
             path.basename += '.min';
          }
       }))
       .pipe(sourcemaps.write('.'))
       .pipe(gulp.dest(targetCss));
});