2016-02-01 52 views
1

我創建了一個Gulp任務,styles,它從Sass文件創建縮小和非縮小的CSS文件。我也想創建縮小的和非縮小的Sourcemap,但是,這似乎不起作用。一個Gulp流中的兩個Sass源圖片

下面是代碼:

// Compile Sass, Autoprefix and minify 
gulp.task('styles', function() { 
    return gulp.src('./assets/scss/**/*.scss') 
    .pipe(plumber(function(error) { 
      gutil.log(gutil.colors.red(error.message)); 
      this.emit('end'); 
    })) 
    .pipe(sourcemaps.init()) // Start Sourcemaps 
    .pipe(sass()) 
    .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
     })) 
    .pipe(sourcemaps.write('../maps'))  
    .pipe(gulp.dest('./assets/css/')) // Create sourcemap 
    .pipe(rename({suffix: '.min'})) 
    .pipe(cssnano()) 
    .pipe(sourcemaps.write('../maps')) // Create minified sourcemap 
    .pipe(gulp.dest('./assets/css/')) 
});  

目前,這將引發一個錯誤,並且不會創建精縮sourcemap。但是,如果我刪除其中一個sourcemap.write實例,那麼它工作得很好。

是否有可能在一個流中創建兩個源地圖?

+0

爲什麼你會想要一個精縮sourcemap?這難道不能擊敗縮小的目的嗎? – cimmanon

+0

源映射未嵌入縮小文件 - 它是一個單獨的文件。能夠看到縮小風格的起源真的很有幫助。 – JeremyE

回答

2

如何實現這樣的事情?

https://github.com/ben-eb/gulp-cssnano/issues/21

編輯:我從上面的鏈接嘗試..我這沒有任何錯誤運行。

// Grab our gulp packages 
var gulp = require('gulp'), 
    gutil = require('gulp-util'), 
    sass = require('gulp-sass'), 
    cssnano = require('gulp-cssnano'), 
    autoprefixer = require('gulp-autoprefixer'), 
    sourcemaps = require('gulp-sourcemaps'), 
    jshint = require('gulp-jshint'), 
    stylish = require('jshint-stylish'), 
    uglify = require('gulp-uglify'), 
    concat = require('gulp-concat'), 
    rename = require('gulp-rename'), 
    plumber = require('gulp-plumber'), 
    bower = require('gulp-bower'), 
    merge = require('merge-stream'), 
    clone = require('gulp-clone'), 
    browserSync = require('browser-sync').create(), 
    clip = require('gulp-clip-empty-files'); 

gulp.task('styles', function() { 
    var source = gulp.src('./assets/scss/**/*.scss') 
     .pipe(plumber(function(error) { 
      gutil.log(gutil.colors.red(error.message)); 
      this.emit('end'); 
    })) 
     .pipe(sass()) 
     .pipe(sourcemaps.init()) // Start Sourcemaps 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'], 
      cascade: false 
    })); 

    var pipe1 = source.pipe(clone()) 
    .pipe(sourcemaps.write('../maps')) 
    .pipe(gulp.dest('./assets/css/')); // Create sourcemap 

    var pipe2 = source.pipe(clone()) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(cssnano()) 
    .pipe(sourcemaps.write('../maps')) // Create minified sourcemap 
    .pipe(clip()) 
    .pipe(gulp.dest('./assets/css/')); 

    return merge(pipe1, pipe2); 
}); 

如果像cimmanon是在暗示,你可能不希望有一個縮小的源地圖,只要刪除

.pipe(sourcemaps.write('../maps')) // Create minified sourcemap 

var pipe2 
+0

好吧,唯一讓我困惑的是style.min.css.map比非縮小版本更大......那是什麼意思? – chuckn246