gulp入坑系列(2)——初试JS代码合并与压缩

时间：2016-12-12 19:48:43 阅读：318 评论：0 收藏：0 [点我收藏+]

标签：string asc div jsb 文件夹 cannot sso img scripts

在上一篇里成功安装了gulp到项目中，现在来测试一下gulp的合并与压缩功能

gulp入坑系列(1)——安装gulp（传送门）：http://www.cnblogs.com/YuuyaRin/p/6159809.html

在之前建立的项目中写入，在根目录新建js文件夹，并在文件夹中新建两个js文件，代码如下：

index.js:

var index={};
index={
test:function(argument){
console.log(‘test‘);
}
}
index.test();

main.js:

var main = {};
main.test=function(argument){
console.log("main test");
}
main.test();

在根目录新建文件夹build，并在build里新建一个空的js文件：all.min.js

在根目录下新建index.html ，在其中引用build下的all.min.js。

index.html:

<script type="text/javascript" src="build/all.min.js"></script>

接下来编辑gulpfile.js文件，来告诉gulp我们要把index.js，main.js合并起来压缩再写入all.min.js中

gulpfile.js:

var gulp = require(‘gulp‘);//gulp自身
var uglify= require(‘gulp-uglify‘);//<span style="font-family: Arial, Helvetica, sans-serif;">引入压缩组件</span>
var concat = require(‘gulp-concat‘);//<span style="font-family: Arial, Helvetica, sans-serif;">引入合并组建</span>
var paths = {
scripts:[‘js/index.js‘,‘js/main.js‘]
} //定义要操作的文件路径
gulp.task(‘default‘, function() {
gulp.src(paths.script)//找到项目下paths变量所定义的script文件
.pipe(uglify())//压缩
.pipe(concat(‘all.min.js‘))//输入到all.min.js中
.pipe(gulp.dest(‘build‘));//指定目录
});

tips:gulp的执行流程采用了流式操作，每一个pipe()可以理解成，上一个操作的输出，就是下一个操作的输入，比如uglify()压缩后输出的，就是concat要输入到文件中的，而concat输出的文件，是gulp.dest要加入的目录中的，可以理解成每部操作都return了下一步要使用的东西。

最终目录结构如下：

技术分享