gulp自动化构建工具的使用

1. 目标：gulp自动化构建工具的使用

1.1 为什么要用gulp？

>> 开发环境：开发项目代码的环境，代码有注释，标准的格式、缩进等等
>> 生产环境：部署的项目代码，要求必须是压缩过的，并且不带空行、缩进、注释等等这样的没有作用的内容

自动化处理工具，帮我们处理这样的过程
-->gulp自动化构建工具
**> 文件自动压缩：图片压缩、JS代码压缩、CSS代码压缩..
**> 文件合并，比如多个JS文件合并成一个JS文件，多个CSS文件合并成一个CSS文件
减少HTTP请求，优化前端项目
**> 内容编译转换：less代码编译成css代码，sass代码编译成css代码

就是使用gulp来处理我们开发环境中开发的代码，让代码更加符合生产环境需要的格式

1.2 怎么使用gulp？

gulp是工作在node环境中的一个工具软件

NodeJS就是提供了一个JS代码的运行环境
NodeJS同时也是一个平台，一个用来管理各种工具软件插件的平台

所以要使用gulp工具软件首先安装NodeJS环境【安装NodeJS软件】 http://www.nodejs.org，下载，安装。
软件安装完成，要测试node环境是否正确
命令行执行命令：node -v #这个命令是查看安装的nodeJS版本的
如果出现v5.7.0类似这样的信息，表示node安装正确

命令行执行命令：npm -v # 这个命令是查看node环境中包管理器是否正常
如果出现v4.1.0类似这样的信息，表示npm安装正确
npm:node package managerment

1.3 使用gulp

> 1.3.1 创建一个普通项目 d:/myproject/shop/ 项目名称：shop
> 1.3.2 將项目初始化成node项目命令行进入d:/myproject/shop/文件夹，
执行命令：npm init 是用来将一个项目转换成由nodejs管理的项目
npm init命令执行完成，会在项目文件夹下自动生成一个package.json文件
这个文件中，就是node管理项目的各种配置信息【自动构建，不需要开发人员干预】

# cd d:/myproject/shop/
# npm init
~ name(shop): 要求输入的信息，可以不用理他，直接回车
~ ...

1.3.3. 安装全局gulp软件全局安装gulp，就是让我们的Node环境，可以正常处理gulp文件
命令行中，执行如下命令
# npm install -g gulp # -g global

1.3.4. 安装项目依赖gulp安装一个项目依赖的gulp，是让项目在node环境中执行时，能正确处理gulp任务
# npm install --save-dev gulp
--save选项，表示在项目的管理文件package.json中，保存一个gulp配置信息
-dev选项，放在--save的后面，表示将gulp描述信息，保存在package.json中
的devDenpendecies选项中

1.3.5 gulp的使用方式通常情况，我们会在项目的根目录定义一个gulpfile.js配置文件
这个配置文件就是专门来配置gulp任务的
* 任务？就是要做一件事情
* JS压缩任务-> 通过gulpfile.js配置一个名称为jsmin的任务，任务中主要进行js文件的压缩

在gulpfile.js进行任务的分配

var gulp = require("gulp");
var concat = require("gulp-concat") // 文件合并的插件

gulp.task("jsHB", function() {
gulp.src("./js/*.js")
.pipe(concat())
.pipe(gulp.dest("./js/project/script.js"))
})

gulp.deafult(["jsHB"])

至此，我们就可以进行gulp的使用了，稍后我会将安装所需的node.js5.7.7免费分享下，有需要的朋友

可以留意下。