由于我所在的项目组一直在用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还是挺简洁使用的。