Grunt是目前最流行的前端构建工具,对前端的效率帮助非常大,但Grunt并非完美无缺,json描述任务的方式,显得过于繁琐和不够简单,对于新手来说,有不少的学习成本。 今天明河介绍个比Grunt更易用的前端构建工具: Gulp.js ,最近很火的开源项目,引起了很多前端同学的关注,大家都很好奇,Gulp.js拿什么跟Grunt掰手腕。 大多数前端处于观望状态,Gulp.js这杯可乐很诱人,但第三方插件太少(常用的任务插件都有),被Grunt甩了N条街,当然毕竟是新工具,情有可原,相信假以时日,Gulp.js会被更多前端同学认可,明河希望通过这篇文章,能够让大家看到Gulp.js的潜力。
安装Gulp.jsGulp.js跟Grunt一样基于Node.js,使用npm安装即可:
想要使用Gulp.js构建您的工程,需要在工程目录中安装Gulp.js的依赖
–save-dev 命令配置,可以自动在工程目录的package.json文件内生成包依赖信息,比如:
(如果项目工程中没有package.json,请运行npm init。) 在工程根目录下创建个 gulpfile.js 文件,内容如下:
使用 gulp 命令,运行Gulp.js构建程序: gulp
表示运行 default (默认任务)成功。 接下来看个具体的demo。 简单使用说明假设 demo工程 目录结构如下:
我们构建的目标是压缩src目录下的a.js和b.js,合并生成all.min.js放在build目录下。 安装插件
gulp-uglify:用于压缩js Gulp.js目前提供了 300多个插件 ,基本可以满足主流前端构建需求。 编写Gulpfile.js构建脚本完整代码:
运行 gulp 命令后:
生成了 all.min.js 。 接下来来看下上述代码的含义。 首先require需要的插件:
使用 gulp.task() 定义一个任务目标:
第一个参数为任务名。 gulp.task()返回值为一个stream,stream的使用是Gulp.js的核心,也是Gulp.js与Grunt的最重要区别,Gulp.js充分利用了Node.js的 Streams API ,关于流的概念下一篇进阶篇会讲解到。 当第二个参数为数组时,表明此任务存在依赖任务,会运行完依赖任务后,才执行该任务,比如:
gulp.src() 任务处理的目标文件,返回的是stream,请把gulp看成矿泉水厂(想起了恒大冰泉-_-!),文件数据理解为水流,这里相当于阀门打开,水开始顺着管道(每个任务可以理解为一段管道)流去,然后经过各个插件的加工过滤,最后罐装到水瓶里面。 .pipe() 是stream的核心方法,不是gulp的方法哦,第一个参数为插件方法,插件会接收从上游流下的文件,进行处理加工后,再往下流。
压缩文件
将压缩后的文件合并成all.min.js,这里留意,不需要目录路径,stream流过来的就是文件数据,只要提供文件名即可。
gulp.dest() :用于指定文件输出位置,第一个参数为目录路径。 最后运行任务:
gulp命令默认执行default任务,等于 gulp default 。 总结gulp的简单使用先介绍这里,下一篇明河将深入讲解gulp的细节,同时指明Gulp.js为什么比Grunt来得优秀。 |
|