創建多個主SCSS文件

Question

如何處理的CSS文件sourcemap通過管道單獨CSS sourcemaps，保持文件名+ .map追加到它？

假設我們有以下幾點：

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

我正在尋找的是這樣的：

/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 sourcemaps使用咕嘟咕嘟的。唯一的問題是，我不確定如何爲每個CSS文件創建一個源映射。這是我有，但只產生一個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

我想我想通了，我在做什麼：我曾兩次對其進行處理。此外，concat()和autoprixer()的使用是多餘的（前者是一個問題）。因此，這是我結束了，這應該是一個相當普遍的引導構建腳本工作：

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