一、解决gulp编译报错后中断问题

vscode设置自动保存后，在开发过程中经常由于使用了gulp.watch经常会导致编译中断

gulp-plumber插件可以解决html及js的报错中断问题

安装: npm install -D gulp-plumber
使用：

var plumber = require('gulp-plumber');
gulp.src(src_dir + "/scripts/**/*.js")
        .pipe(plumber())  //优先使用plumber()
        .pipe(jshint())
        .pipe(jshint.reporter('default'));

gulp.src(dist_dir + "/templates/**/*.html")
        .pipe(plumber())
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(templateCache("tpl.min.js", {
            module: "xt.templates",
            standalone: true
        }))
        .pipe(gulpif(isUglify, uglify()))
        .pipe(gulp.dest(dist_dir + "/scripts/"));

效果： image.png

针对sass文件的编译中断问题，需要结合gulp-sass和gulp-plumber一起使用

安装：npm install -D gulp-sass
使用：

var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
gulp.src([src_dir + "/styles/toastr.scss"])
        .pipe(plumber())
        .pipe(sass({ errLogToConsole: true }))
        .pipe(minifyCss())
        .pipe(concat("toastr.min.css"))
        .pipe(gulp.dest(dist_dir + "/styles/"));

效果：

image.png 参考：https://github.com/floatdrop/gulp-plumber/issues/32

二、环境变量配置

项目上线，需要明确的区分生产环境和开发环境

1. 创建本地配置文件和生产环境配置文件分别为config.dev.json和config.prd.json在项目的根目录下面
   config.dev.json例：

{
    "path": {
        "THIRD_WEB": "https://localhost:8081"  
    }
}

2. 安装gulp-preprocess：
   npm install -D gulp-preprocess

3. 设置package.json脚本

"scripts": {
    "serve": "gulp local --env=local",
    "build": "gulp default --env=production"
  }

4. gulpfile.js配置：

var runSequence = require('run-sequence');
var preprocess = require('gulp-preprocess');
var browserify = require('browserify');

var CONTEXT_PATH = argv.env == 'local' ? require('./config.dev.json') : require('./config.prd.json');

var config = {
     path: CONTEXT_PATH.path
 };

gulp.task('htmls', function () {
    return gulp.src( "./htmls/**/*.html")
        .pipe(preprocess({
            context: config.path,
        }))
        .pipe(gulp.dest("../"));
});

gulp.task('scripts',  function () {
    return browserify("./scripts/app.js", { transform: [envify] })
        .bundle()
        .pipe(source("app.min.js"))
        .pipe(preprocess({
            context: config.path,
        }))
        .pipe(gulp.dest("../scripts/"));
});

gulp.task('local', function (cb) {
    process.env.NODE_ENV = 'local';
    runSequence("htmls", ''scripts'', cb);
});

5. 在html中的使用规则如下

<script src="<!-- @echo THIRD_WEB -->/jquery.min.js"></script>

6. 在js中的使用规则如下

window.location.href = '/* @echo THIRD_WEB */'