一开篇
在前端开发的过程中，我们经常会碰到压缩、合并、图片script 等，于是就有了gulp 前端自动化构建工具，它能帮你在前端开发中，节省时间。
1，安装 node.js
因为gulp 构建工具是基于node环境的，那么什么是 node.js呢，下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
用自己的话，node.js 就是一个运行js的环境，谷歌浏览器就是 V8 引擎
百度搜索node.js ，进入中文官网下载，它会自动识别电脑系统，如果下载不了，请自行解决
然后打开cmd 命令行 执行
node -v
查看 node 是否安装成功
2，npm 包管理器
安装 node 后，默认就安装了 包管理器，但是在很久之前都是单独安装的 ，可见它的发展，这个在以后我们会经常用到
因为 墙的原因，我们需要将安装cnpm ，以后 使用npm的地方，都用cnpm来代替，感谢淘宝
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后 使用 npm -v 检查 npm 是否安装成功
cnpm -v 检查cnpm 是否安装成功
3，gulp 自动化构建工具
先来个官网地址：http://www.gulpjs.com.cn/
安装 gulp
cnpm install gulp -g
检查 gulp 是否安装成功， gulp -v
安装gulp成功后，我们使用 gulp 压缩、合并文件
（1） 创建一个文件夹
（2）package.json 文件
很多人看到这个文件就晕了，干什么的啊，我第一次看到这个也晕了，先不用管他，就是一个配置文件，打开cmd命令行，进入你创建的文件夹，下面我们使用 cnpm init 创建配置文件，一路回车，不用管它，现在看你新创建的文件夹下面是不是有一个 package.json 文件。
为了正常使用，我们要在本地安装gulp：
cnpm install gulp --save-dev
你会发现我安装了两次 gulp，全局安装是为了执行gulp任务，本地安装是为了调用gulp插件的功能
这个时候你会在 你新建的文件夹下，发现一个 node_modules 文件
（3）安装 插件
因为 gulp 本身是不含 压缩、合并等功能的，下面我们需要安装 gulp 插件
1.css压缩 gulp-minify-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：
4.重命名 gulp-rename
5.js代码检测 gulp-jshint (或gulp-jslint)
(更多插件可以查看 http://gulpjs.com/plugins/ )
在项目根目录下执行以下命令（安装上面需要的插件）：
npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安装好的插件会出现在上面提到的node_modules文件夹中。
（4）使用 gulp
现在可以使用gulp了，在项目根目录下创建 gulpfile.js ，这不就是js文件么？是的
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'), // reqire 加载插件
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint');
// 语法检查
gulp.task('jshint',function(){ // gulp.task方法用来定义任务，第一个参数是任务名，第二个是执行函数
return gulp.src('js/*.js') // 需要操作的文件
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 压缩css
gulp.task('minifycss',function(){
return gulp.src('css/*.css')
.pipe(concat('all.css')) // 压缩后的文件名
.pipe(rename({suffix: '.min'})) // rename 压缩后的文件
.pipe(minifycss()) // 执行压缩
.pipe(gulp.dest('css')); // 用来写文件的，文件路径
});
// 压缩、合并js
gulp.task('minifyjs',function(){
return gulp.src('js/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify()) // 压缩
.pipe(gulp.dest('js'));
});
// 在cmd中输入gulp，执行的就是这个任务，压缩js需要在检查js之后操作
gulp.task('default',['jshint'],function(){
gulp.start('minifycss','minifyjs');
});
你把上面的文件复制到 gulpfile.js 中，然后再cmd命令行，执行gulp
这个时候就执行完成了，你去css 和 js 文件中就能看到压缩的文件了
上面红线标出的 errors 是因为在压缩前，检查js语法，上面的提示就是js语法错误，这个提示有可能不准确，你还是去看一看吧。