一个 Gulp 流中的两个 Sass 个 Sourcemap

Question

我创建了一个 Gulp 任务，styles，它从 Sass 个文件创建缩小和非缩小的 CSS 文件。我还想创建缩小和非缩小的 Sourcemaps，但是，这似乎不起作用。

代码如下：

// 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.write 个实例之一，那么它就完全可以正常工作了。

是否可以在一个流中创建两个源映射？

Answer 1

实施这样的事情怎么样？

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

编辑：我从上面的尝试 link.. 我得到这个运行没有任何错误。

   // 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

一个 Gulp 流中的两个 Sass 个 Sourcemap

Two Sass Sourcemaps in One Gulp Stream

sass

source-maps

gulp