Création de sources de données CSS pour plusieurs fichiers scss maîtres

Question

Comment traiter les fichiers CSS vers des fichiers sourcemap acheminés individuellement, en conservant le nom de fichier + .map ajouté?

En supposant que nous avons les éléments suivants:

/assets/stylesheets/scss/ 
    site.scss 
    other.scss 
    home.scss 
/assets/stylesheets/compiled/ 
    site.css 
    other.css 
    home.css 

Ce que je suis à la recherche est la suivante:

/assets/stylesheets/scss/ 
    site.scss 
    other.scss 
    home.scss 
/assets/stylesheets/compiled/ 
    site.css 
    site.css.map 
    other.css 
    other.css.map 
    home.css 
    home.css.map 

Je veux produire les sourcemaps CSS pour ceux qui utilisent Gulp. Le seul problème est, je ne suis pas sûr de savoir comment créer un sourcemap par fichier CSS. Voilà ce que j'ai, mais il ne produit que le seul fichier site.css:

var gulp = require('gulp'), 
    gulpif = require('gulp-if'), 
    concat = require('gulp-concat'), 
    sass = require('gulp-sass'), 
    minify = require('gulp-minifier'), 
    autoprefixer = require('gulp-autoprefixer'), 
    sourcemaps = require('gulp-sourcemaps'); 

... 

gulp.task('sass', function(){ 
    return gulp 
     .src(config.publicDir + '/stylesheets/scss/*.scss') 
     //.pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(sass({ 
      includePaths: [config.bootstrapDir + '/assets/stylesheets'], 
     })) 
     .pipe(gulpif(overrides.disable_minify, minify({ 
      minify: true, 
      collapseWhitespace: true, 
      minifyJS: false, 
      minifyCSS: true, 
      getKeptComment: function(content, filePath){ 
       var m = content.match(/\/\*![\s\S]*?\*\//img); 
       return m && m.join('\n') + '\n' || ''; 
      }, 
     }))) 
     .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled')) 
    ; 
}); 
tasks.push('sass'); 

... 

gulp.task('sourcemaps', function() { 
    return gulp 
     .src(config.publicDir + '/stylesheets/compiled/*.css') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(sourcemaps.init()) 
     .pipe(autoprefixer()) 
     .pipe(concat('site.css')) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled')) 
}); 
tasks.push('sourcemaps'); 

Answer 1

Je pense que je me suis dit ce que je faisais: je en train de traiter deux fois. En outre, l'utilisation de concat() et autoprixer() était superflue (et un problème dans la première). Donc c'est ce que j'ai fini avec, qui devrait fonctionner comme un script de construction Bootstrap assez général:

var gulp = require('gulp'), 
    gulpif = require('gulp-if'), 
    sass = require('gulp-sass'), 
    minify = require('gulp-minifier'), 
    sourcemaps = require('gulp-sourcemaps'); 

var tasks = [], 
    overrides = { 
     disable_watcher: false, 
     disable_minify: true, 
    }, 
    config = { 
     bootstrapDir: process.cwd()+'/public_html/bootstrap-sass', 
     publicDir: process.cwd()+'/public_html/assets', 
    }; 

gulp.task('sass', function(){ 
    return gulp 
     .src(config.publicDir + '/stylesheets/scss/*.scss') 
     .pipe(sass({ 
      includePaths: [config.bootstrapDir + '/assets/stylesheets'], 
     })) 
     .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulpif(!overrides.disable_minify, minify({ 
      minify: true, 
      collapseWhitespace: true, 
      minifyJS: false, 
      minifyCSS: true, 
      getKeptComment: function(content, filePath){ 
       var m = content.match(/\/\*![\s\S]*?\*\//img); 
       return m && m.join('\n') + '\n' || ''; 
      }, 
     }))) 
     .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled')) 
    ; 
}); 
tasks.push('sass'); 

if (!overrides.disable_watcher && tasks.indexOf('sass') !== -1) { 
    gulp.task('watch', function(){ 
     gulp.watch(config.publicDir + '/stylesheets/scss/*.scss', ['sass']); 
    }); 
    tasks.push('watch'); 
} 

gulp.task('default', tasks);