上手gulp - 压缩JS ¶

• 作者：KK

• 发表日期：2016.06.23

安装gulp-uglify模块 ¶

先在项目目录下执行以下命令安装gulp-uglify这个模块

npm install --save-dev gulp-uglify

这样node_modules里除了gulp目录外应该还多了个gulp-uglify

实现压缩 ¶

在项目目录下建立src目录，里面放几个js文件（里面要有一些JS代码，比如在你的项目里随便复制几个你们自己写的进去）

再在项目目录下建立一个叫dist的目录与src平级，里面是空的不要放东西

gulpfile.js的代码用下面这块：

var gulp = require('gulp'),
	minjs = require('gulp-uglify');
	
gulp.task('default', function () {
	gulp.src('./src/**/**.js')
		.pipe(minjs().on('error', function(error){
			console.error(error.message + '\n出错行号:' + error.lineNumber);
		}))
		.pipe(gulp.dest('./dist'));	
});

执行gulp命令，然后就会发现dist目录下面也出现了和src目录下文件名一模一样的js文件

再查看这些新产生的js文件的内容，发现里面的JS代码是被压缩成一行的，变量是混淆的

这就是一个JS文件从src构建到dist的过程，所谓gulp就个前端构建工具，后面还有更多构建功能可以发挥

建议加入错误提示 ¶

以上demo在发现JS写错了语法的情况下会通过console.error报出错误和相关行号

网上很多demo没有这样，导致有些新手会因为不小心写错了语法导致无法正常构建却一直摸不着头脑，所以有这个提示比较合理一点