gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误

需求分析：将js文件压缩成一行，减少js文件的大小。压缩过程中如果遇到js语法错误，将会报错并且压缩会被终止。所以我们需要：

• 在开发环境下，编写js代码时，要监听并检查js文件的语法，避免语法错误导致最后生产环境打包压缩js时失败的问题
• 在生产环境时，压缩js时保证没有语法错误，或者说提供检查语法错误的task，以方便检查错误

一、安装gulp-uglify和pump模块

说明：使用pump代替pipe可以检查到js的语法错误

npm i -D gulp-uglify pump

二、gulp-uglify使用

如下，这样使用的话就没办法检查到js中的语法错误，会导致最后打包失败的问题，所以要引入pump模块来帮助我们查出哪里的语法有错，方便修改

var uglify = require('gulp-uglify');        // js 压缩

gulp.task('js_main', function(){
    return gulp.src('./src/js/*.js')
        .pipe(concat('main.min.js'))    // 合并文件并命名
        .pipe(gulpif(env==='build', uglify()))  // 压缩js
        .pipe(gulp.dest('./dist/js'));
});

三、使用pump代替pipe

var uglify = require('gulp-uglify');        // js 压缩
var pump = require('pump');

gulp.task('js_main', function (cb) {
    pump([
        gulp.src('./src/js/*.js'),
        concat('main.min.js')
        uglify(),
        gulp.dest('./dist/js')
    ], cb);
});

如上可以实现我们的需求。但是会出现新的问题：

1、只有执行压缩命令，才会检查到错误，而开发模式是不需要压缩的；

2、必须要等到concat()之后再执行uglify()，否则压缩过后的文件可能会有很多重复代码，比如：会有多个’use strict’，导致压缩不彻底；

3、因为concat()要先执行，所以控制台对于js语法的报错提示是基于main.min.js的，如下，这并不能协助我们进行代码修改。

4、我们有时候需要单独检查js语法，而不需要做任何其他的操作，所以要将检查js语法的任务独立出来，请看下一步骤：

.

四、创建uglify_check任务

1、此任务不需要合并文件，不需要打包到dist/；

2、此任务作为’js_main’的依赖执行，如果有错，则’js_main’不会被执行

gulp.task('uglify_check', function (cb) {
    pump([
        gulp.src('./src/js/*.js'),
        uglify(),
    ], cb);
});

gulp.task('js_main', ['uglify_check'], function(){
    return gulp.src('./src/js/*.js')
        .pipe(concat('main.min.js'))    // 合并文件并命名
        .pipe(gulpif(env==='build', uglify()))  // 判断是否压缩压缩js
        .pipe(gulp.dest('./dist/js'));
});

3、开发过程中，编写js文件时的错误提示，如下，可以直接点击链接调到错误的代码的地方，方便进行修改

五、gulp uglify_check使用

1、如上，我们在开发过程中能够很好的避免语法错误。

2、退一步讲，如果开发时有些错误没有及时更改过来并且又被浏览器兼容了。那我们在npm run build失败的时候可以通过gulp uglify_check单独检查错误并修改。比如：Chrome浏览器会兼容es6的语法，但是uglify()是不能压缩es6的

3、后续会讲到使用gulp-babel编译es6

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题