以前接触过一些前端构建工具,如Ext.net自带的脚步生成工具,RequireJs的R.js,这些工具功能都比较单一或者不易用。
周四参加QCon开发技术大会又了解到一些业内企业的技术取向,其中谈到ES6,还有gulp.
对于gulp而言以前只是一些网上看到这个字样,还有grunt。但都没有去稍微了解过,今天正好想到了解一下。
gulp和grunt都是前端构建工具,基于nodeJs进行 ,可以对前端资源进行脚本合并,图片合并,脚本检查,less和saas编译,监视前端资源变化并自动构建等工作
gulp属于后起之秀,简单易学,性能较高(网上传言),基于Stream进行构建任务
grunt 基于临时文件进行构建任务 ,每次构建任务的执行后把结果放入临时任务文件,下次任务的执行都是基于上次生成的临时任务文件进行执行
gulp 主要包含 gulp.src ,gulp.dest,gulp.task, gulp.watch 接口 API,下面逐一简要介绍
src,获取文件流 支持模式匹配
dest生成文件
task定义一个 任务,默认的任务是default
watch监视相关文件变化,当变化发生时执行相关任务
pipe 流输出方法
安装
npm install gulp -g
npm install --save-dev gulp
插件
gulp-concat
gulp-rename
gulp-uglify
gulp-less,gulp-saas
gulp-imagemin