Gulp前端自动化构建工具的应用

Gulp前端自动化构建工具的应用

1. 引言：

实际前端开发不再仅仅是静态页面的开发了，丰富的前端技术让前端的代码逻辑越来越复杂，

模块化开发和各类框架也增加了在生产环境中部署开发环境代码的难度，这种情况下，前端自动化构建在前端开发中尤为重要。

我们会遇到下面的问题：

a. 每次修改了HTML、JS、CSS等文件，都需要手动刷新浏览器，能不能修改了让浏览器自动刷新呢 ？

b. 在发布项目的时候，需要将前端资源进行合并、压缩，尽量减少http请求，手动去完成合并压缩不仅繁琐，还容易出错，有什么技术可以自动地执行这些操作，解放我们的双手呢？

2. Gulp - 基于流的自动化构建工具

Gulp的出现完美解决了引言中的问题，再利用Node.js的威力，我们就可以快速构建项目。

Gulp的API很少，上手很快，简单介绍下：

a. gulp.src()

Input输入，文件的读取操作；从操作系统中读取一个或者多个文件，读取完的文件由 gulp 加载到内存中，等待继续的操作

b. gulp.dest()

output 输出，也即文件的写入操作

c. gulp.task(name,[,deps],fn)

第一个参数是要执行任务的名字，第二个参数是执行该任务需要依赖的任务，第三个参数定义了所要执行的操作

d. gulp.watch()

监视文件，文件发生改动时执行定义的操作

其中，还有一个 pipe() 可以理解成管道、下一步要执行的操作的意思。

如下图：执行一个"server"任务,监控src目录下的html文件，如果发生了变化，执行reload任务，reload任务是将 src 目录下的所有html文件复制到build目录下。

3. gulp的插件：

gulp有很多高质量的插件，正是通过这些插件，才能完成各种任务,下面列了一些常见的插件。

gulp-concat：css文件合并

gulp-clean-css：css文件压缩

gulp-babel：JS ES6语法转ES5

gulp-uglify：JS 压缩

gulp-rename：文件改名

gulp-imagemin：图片压缩

browser-sync：浏览器同步测试工具

4. 关于gulpfile.js

在项目根目录下，我们需要新建一个命名为 gulpfile.js 的js文件，我们的任务都写在这里

编写 gulpfile.js注意事项：

路径的统一配置：方便日后根据实际项目的目录名进行更改。

5. 代码部分

代码部分的思路就是将开发环境和生成环境完全分开：

开发环境：启动开发环境的服务器，修改了任何一个文件，服务器自动同步效果；

生产环境：部署开发环境的代码，并对资源文件合并、压缩。

5.1. 开发环境代码

5..2 生产环境代码

6. 使用方法

a. 安装node环境

b. 拷贝package.json、gulpfile.js 文件到自己项目的根目录，package.json里就是安装插件的依赖

命令行 npm install 安装所有依赖

c. 开发阶段，命令行执行 gulp dev,开启文件实时监控的任务，文件的更改后自动刷新浏览器页面

d. 生产环境，命令行执行 gulp product 执行CSS、JS、图片的合并压缩任务

7. 其他好用的插件

gulp还有一些其他好用的插件，可以根据实际情况自行配置哦

gulp-css-spriter：雪碧图自动合成

gulp-base64：转成base64的图片

gulp-rev：版本控制

gulp-notify：项目通知

......

8. 总结

前端自动化构建工具能让我们更高效的工作，所谓磨刀不误砍柴功嘛。Gulp还有很多实用高效的插件，需要我们在实践中探索，结合项目需求进行选择。

附：我的DEMO地址： https://github.com/pluscai/gulp