複数のマスターscssファイル用のCSSソースマップを作成

Question

CSSをソースマップファイルに処理するには、ファイル名+ .mapを追加して個別にパイプ処理しますか？

我々は次のようしていると仮定：

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

は私が探しているこれです：私はがぶ飲みを使用してそれらのためのCSS sourcemapsを生成したい

/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 

。唯一の問題は、CSSファイルごとにソースマップを作成する方法がわかりません。これは私が持っているものですが、それは一つだけsite.cssファイル生成します。私はそれを2回処理していた。

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

を私は私が何をやっていた考え出したと思います。また、concat()とautoprixer()の使用は余計でした（前者の問題）。だからこれは私が結局終わったものです。かなり一般的なBootstrapビルドスクリプトとして動作するはずです：

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);