浅谈web前端自动化工具--gulp

背景：

在前端的开发中上线之前可能会做的事情：

1、文件目录调整HTML注释、换行等操作。
2、CSS压缩合并、JS代码压缩重命名。
3、CSS语法检测
4.、.......

上述这些操作是重复而枯燥的，如果是人工来一项一项做，会浪费大量时间。而且人工操作有时候还会带来一些想不到的bug。例如css改动导致页面错位、js改动可能导致功能不正常。

这个时候web前端自动化工具就出现了，当然前端的飞速发展。各种web前端自动化工具也层出不穷，这里就浅谈一下我个人用的web前端自动化工具--gulp。

web前端自动化构建工具

1、准备工作

1.1、 打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。然后像安装QQ一样安装它就可以了（安装路径随意）。因为在安装并使用gulp的时候，需要先安装node.js.利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

node.js官网

1.2、 安装好了之后，打开cmd命令行输入node -v，用来检测是否安装成功。如安装成功则提示node.js的版本号。

1.3 、 由于nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 **npm -v **来测试是否成功安装。同上述node.js方法一样，安装成功则提示npm的版本号。

2、gulp全局安装

2.1、说明：全局安装gulp目的是为了通过她执行gulp任务；
2.2、安装：命令提示符执行npm install gulp -g；
2.3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。

CMD版本检测

3、新建一个package.json文件

3.1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
3.2、以我个人的一个项目当中的一个json文件为例

package.json文件

3.3、当然如果说手动配置这些东西，那么今天的主题估计就不能够称为web前端自动化了。这里我们通过CMD命令符执行npm init

3.4、为了方便读者更好了解这个 npm init 的使用，我讲自己原本的package文件删除。重新执行npm init

通过npm init 配置gulp文件

4、安装gulp 本地服务

4.1、进入该项目目录下，输入npm install gulp --save-dev
4.2、 这个时候可能有人会问，为什么前面全局下安装了一个gulp，现在又在本地文件下还要安装gulp。我们全局安装了gulp，项目也安装了gulp。为啥装两遍？？

为什么要装2

说明：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能，作为项目的开发依赖（devDependencies）。
4.3、之后继续安装gulp插件。本示例以gulp-rename（文件重命名）和gulp-uglify（js代码压缩）为例，命令提示符分别执行**npm install gulp-rename --save-dev ** 和 npm install gulp-uglify --save-dev .
4.4、CMD指令执行完毕之后，这个时候你的当前目录下，就生成了node_modules文件夹。

gulp项目文件夹

5、新建gulpfile.js文件（重要）

gulpfile.js这个入口文件，在前面已经出现了不少次数了。下面就开始关于gulpfile.js文件配置，还是以本人的项目代码为例：

gulpfile.js

6、gulp运行

6.1、进入gulpfile文件下打开CMD，输入gulp dabang

gulp dabang简易操作

6.2、运行成功之后，最后我的文件夹当中出现一个js代码压缩，后缀名添加min的js文件。

gulp自动压缩重命名后的chedabang.js文件

7、小结

7.1、安装nodejs；
7.2、gulp全局安装npm install gulp -g
7.3、项目文件安装本地gulp服务 npm install gulp-less --save-dev以及相应的gulp 插件
7.4、新建package.json文件；
7.5、新建gulpfile.js文件；
7.6、通过命令提示符运行gulp任务

以上就是关于web前端自动工具--gulp个人的简单一点的使用，更多gulp 插件以及API使用，请访问请查看 gulp中文网.

注：以上就是个人对于gulp使用的一点心得，欢迎各位大佬(￣ε(#￣)打脸指教！！

欢迎大佬指点