使用gulp-sourcemaps的一个疑问


我的SourceMap内嵌到文件中了,如何在发布的时候去掉这些SourceMap内容呢? 图片描述

gulp source-map css stylus

Lua2z 9 years, 9 months ago

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

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


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

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

bolocha answered 9 years, 9 months ago

我用的是这样的结构 (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。

K-OFF answered 9 years, 9 months ago

Your Answer