使用gulp压缩合并代码

大家都知道gulp是我们的前端构建神器，那么gulp应该怎么使用呢？
首先 你的电脑上要装有node环境 使用gulp第一步要进行全局安装
这里需要使用npm(npm是安装node时附带的包管理工具)

全局安装：打开命令行 npm install -g gulp（在任何文件夹下都可以打开命令行）
本地安装：建一个文件夹，也就是你的工作目录，进入该目录，键入命令 npm install gulp

 这里的全局安装是为了让你将来无论在哪个目录下都可以使用gulp,也就是配置了一些环境变量  本地安装就是在本地文件夹中创建一个node_modules的文件夹，并在网络上下载需要的js库（不单是一个js文件，而是一个node项目，称为包），放到这个文件夹。

下载完以后，在我们的工作目录下出现了node_modules的文件夹，然后我们要在工作目录下创建一个gulpfile.js的文件（注意：这是固定写法）。
同html中的script标签一样，在node代码中需要什么就要引入什么，但是在node中没有script标签，而是使用require(‘包名’)
gulp是一个要创建什么任务就执行什么事情的工具，执行不同的任务，也要引入相关的包。

合并

要合并文件，就安装可以合并文件的gulp包即可，gulp包的特点就是都以gulp-开头，那么去哪里找呢？

http://npmjs.org/plugins
http://gulpjs.com/plugins

这两个网站都可以找到gulp包
合并的包是gulp-concat
首先我们要在命令行中使用npm install gulp-concat将这个包下载到本地,这里我们在工作目录下再创建一个叫src的文件夹，用于存放将要合并的一些文件
然后在gulpfile.js文件中写入

//1、引入包var gulp = require('gulp);//引入gulp包var concat = require('gulp-concat');//引入支持合并的包//2.创建任务gulp.task('concat',function(){//创建任务 任务名字叫task    return gulp.src('./src/*.js')//代表要合并的文件是src目录下的所有js文件    .pipe('concat,'all.js')//合并后文件存放在叫all.js的文件中    .pipe('gulp.dest('./dest/')')；//合并后的文件在一个叫dest的文件夹中  })

最后在命令行中输入 gulp concat
然后回我们的dest也就是目标文件中一看，果真存在一个all.js的文件 而这个文件的内容就是我src文件夹中1.js 和2.js的内容的结合

【ps】 这里需要注意在下载一些功能包的时候可能会报错，这是因为工作目录下没有package.json这个文件 ，如何创建这个文件呢？
在下载包之前输入 npm init 然后一直回车下去就ok啦，如果不想每次按回车麻烦就可以 npm init -f 一步就到位了
.pipe()这个东西相当于jquery中的链式编程 pipe愿意是管道的意思

压缩

1.如果我们想压缩html文件中的代码 则使用gulp-htmlmin这个包

var gulp = require('gulp');var htmlmin = require('gulp-htmlmin');gulp.task ('htmlmin',function(){    return gulp.src('./src/*.html')    .pipe(htmlmin({    collaspseWhiteSpace:true//压缩html文档中的空白}))    .pipe(gulp.dest('dist'))})

gulp htmlmin后，我们发现html文件中只有html代码被压缩了，其他css和js代码还是原来的样子。。。

进入这个网址https://github.com/kangax/html-minifier，有所有gulp-htmlmin的配置参数
比如说你要把html中的css代码也压缩了，就使用minifyCSS：true，想连js也一并压了，就用minifyJS：true就可以了，还有好多别的参数，大家用到的时候再看吧

2.如果是想压缩js文件，则下载gulp-uglify这个包 这里我们可以先合并 再压缩
首先 在gulpfile.js中引入相关的包（前提是这些包你都已经通过npm安装到了本地）

var gulp= require('gulp);var concat = require('gulp-concat);var uglify = require('gulp-uglify');

然后 创建我们的任务 这回是两个哦

//先合并gulp.task('concat',function(){    gulp.src('./src/*')    .pipe(concat('all.js'))    .pipe(gulp.dest('dist'));});//再压缩gulp.task('uglify',function(){    gulp.src('./dist/*')//这里要压缩的代码是刚刚合并后放在dist中的那个    .pipe(uglify())//不用传参 则压缩后的文件名和合并后的文件名相同 都是all.js    .pipe(gulp.dest('mini'));//这里把压缩后的代码放入了一个叫mini的文件夹中})

最后
在命令行中输入 gulp concat 回车等待合并完后再输入gulp uglify
回到我们的mini文件夹一看，果真存在一个名为all.js的文件 打开一看竟然被压缩成了一行 神奇！

别高兴太早

感觉gulp很简单是不是，其实上面代码也是有很多坑的，下面我们来看看这些坑吧
【1】：当我们要合并多个js文件，而这些js文件又存在依赖关系，如果我们把它们都放在了一个叫src的文件夹中，用gulp.src(‘./src/*.js’)去合并的话，那么合并后的js很有能使不能用的，这是我们就需要让这些文件按照指定的顺序来加载，gulp让我们这样做

gulp.src(['main.js','son1.js,'son2.js'....])

如此我们就可以按照数组的顺序去加载代码了，最先加载main.js 然后son1.js。。。ok这个问题解决了
【2】：实际工作中我们不可能就这么一两个任务吧，那么当任务很多的时候，你难道要先写gulp concat 然后等待它合并完 你再gulp uglify 等待压缩完 再gulp concat 等待。。。再gulp xxx。。。很浪费时间啊
假如说我们现在有三个任务 task1 task2 task3
我们想让它们按task2 task1 task3的顺序执行，这时最后执行的肯定是task3,也就是说后一个要等前一个执行完才开始执行 这时gulp给我们提供了这样的语法

 gulp.task('task3',[task1,task2],function(){...})

也就是task3要等task1执行完再执行，而task2又要等task1执行完才执行
同时gulp还给我们提供了一个默认的任务名 default 如果我们设置了

gulp.task('default',['task3'，‘task1’,'task2'],function(){...})

这样我们在命令行中输入 gulp回车就可以让任务乖乖的自己执行了，因为default执行前要先执行task2,task2执行之前要先执行task1,而task1执行前要执行task2,这样就按照2 1 3的顺序执行了
不知你是否对gulp有一点了解了呢