gulp入门小记

由于我所在的项目组一直在用gulp构建工具，而我只是在前人搭好的环境下每次运行gulp packJs来打包js，对里面的东西全然不知，刚好最近有些时间就想自己从学学将gulp怎么用于构建前端项目中，这样也会对这个构建工具有一些深刻的理解。

首先，gulp是什么？gulp是基于nodejs的自动任务运行器，能自动地完成html js css sass image等文件的的检查、合并、压缩、浏览器自动刷新、部署文件生成，在实现上，借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，输入输出是基于流式的。gulp不需要复杂的配置文件（所以构建脚本是代码而不是配置文件），都是使用标准库（node.js standard library）来编写脚本；插件都很简单，只负责完成一件事－基本上都是 20 行左右的函数；任务都以最大的并发数来执行。

其次，安装和使用，网上有好多安装教程这里就简单说下。第一，node是环境需要，所以应首先安装；第二，全局安装gulp（npm install -g gulp）再在项目下局部安装gulp（npm install -save--dev gulp）；第三，在项目目录下面新建基于nodejs不可少的package.json（也可以用命令行npm init）和gulp的配置文件gulpfile.js。然后需要什么插件安装后在gulpfile.js里面require一下操作就行。

最后，说说gulp最常用的api函数（下面只写一个大概，具体还需亲自去看api文档）：

① gulp.task(name[, deps], fn)：name是任务名称，deps是可选的数组（该任务依赖的任务），fn是调用插件操作；

② gulp.src(globs[, options])：指明处理的源文件路径，options是可选的，返回当前流至可用插件。

③ gulp.dest(path[, options])：指明处理后的输出路径;

④ gulp.watch(glob[, options], tasks) / gulp.watch(glob[, options, cb])：监视文件的变化并运行相应的任务。

最后最后再说一个自己搭建过程中遇到的一个小问题，就是用http-server和livereload在我的电脑上始终没起作用，后来换了一种方式改用gulp-connect就可以实现浏览器自动刷新了。后来还试了一下基本的js css压缩插件 也都没有问题，以后再慢慢深入吧。总体感觉gulp还是挺简洁使用的。