使用gulp-sourcemaps的一个疑问

Question

我的SourceMap内嵌到文件中了，如何在发布的时候去掉这些SourceMap内容呢？

Answer 1

我用的是这样的结构 (gulpfile.js)：

// Environment setup.
var env = {
    production: false
};

// Environment task.
gulp.task("set-production", function(){
    env.production = true;
});

// Css process.
gulp.task("postcss", function(){
    var processors = [
        autoprefixer({
            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]
        })];

    if(env.production){
        processors.push(csswring());
        return gulp.src(["./stylesheets/src/*.css", "!./stylesheets/src/fontello.css"])
            .pipe(postcss(processors))
            .pipe(gulp.dest("./stylesheets/dest"));

    }else{

        return gulp.src(["./stylesheets/src/*.css", "!./stylesheets/src/fontello.css"])
            .pipe(sourcemaps.init())
            .pipe(postcss(processors))
            .pipe(sourcemaps.write("."))
            .pipe(gulp.dest("./stylesheets/dest"))
            .pipe(filter("*.css"))
            .pipe(reload({stream: true}));
    }
});

gulp.task("dev", ["postcss"]);
gulp.task("release", ["set-production", "clean", "postcss"]);

同一个postcss的构建任务，会有两条路径，生产环境路径不包含sourcemap。

Answer 2

既然是使用gulp来构建，就应该区分开发(development)和生产(production)环境，在生产环境时不生成Source Map就行了。

一个比较简单的区分方法如下：

var isProduction = process.env.NODE_ENV === 'production';

// 或者
var env = process.env.NODE_ENV || 'development';

Answer 3

SourceMap，可以生成单独的 .map文件。
如图，不想要.map文件，删了就行

再者可以分开发环境，或 写一个打包为生产环境的 build 命令