gulp 自动化构建组件集合

1.node-hbsfy和node-pugify
borwserify 支持 require handlebars模板及jade模板
Github:
https://github.com/epeli/node-hbsfy
https://github.com/domenic/jadeify

2.node-glob
使用glob来返回目录中所有子文件(文件或文件夹)
Github:
https://github.com/isaacs/node-glob
教程:
http://www.cnblogs.com/liulangmao/p/4552339.html
glob通配符释义:
http://blog.csdn.net/zhuchuji/article/details/51297819

3.gulp-inject
CSS和WebComponent 注入插件,将它们注入到index.html文件中(官方解释),把css,js这些静态文件注入到html文件中,不需要手动添加。
Github:
https://github.com/klei/gulp-inject

4.main-bower-files
通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖,返回一个文件数组
Github:
https://github.com/ck86/main-bower-files

5.vinyl-buffer
将虚拟的流文件转换为可以使用的的buffer文件
Github:
https://github.com/hughsk/vinyl-buffer

6.gulp-if
为功能执行添加条件判断,跟程序语言中的if是相同语义
Github:
https://github.com/robrich/gulp-if

7.browserify-shim
browserify-shim 是一个转换工具,它会读取 package.json 文件的 “browserify-shim” 属性,将不遵循node风格的commonjs的输出写法的模块包转换成browserify可以读懂的模块包
Github:
https://github.com/thlorenz/browserify-shim

8.babel-polyfill
IE8兼容包
Github:
https://github.com/babel/babel/tree/master/packages/babel-polyfill

9.vueify
在browserify中编辑vue代码
Github:
https://github.com/babel/babel/tree/master/packages/babel-polyfill

10.watchify
Github:
https://github.com/browserify/watchify

11.gulp.spritesmith
小图(图标)合成精灵图,拼接图片并生成样式表,并且还能输出SASS,Stylus,LESS甚至是JSON
Github:
https://github.com/twolfson/gulp.spritesmith

12.gulp-filter
在虚拟文件流中过滤特定的文件
Github:
https://github.com/sindresorhus/gulp-filter

13.gulp-order
The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of gulp.src,这是官方定义,简单来说,就是按给定的顺序整理需要处理的文件集。
Github:
https://github.com/sirlantis/gulp-order

14.gulp-concat 与 gulp-concat-css
合并js与css文件,比如合并多个js或css到一个文件
Github:
https://github.com/contra/gulp-concat
https://github.com/mariocasciaro/gulp-concat-css

15.rework
Github:
https://github.com/reworkcss/rework

16.del
使用glob匹配规则来删除文件或文件夹
Github:
https://github.com/sindresorhus/del

17.gulp-less和gulp-sass
编译less和sass文件的gulp插件
Github:
https://github.com/stevelacy/gulp-less
https://github.com/dlmanning/gulp-sass

18.gulp-postcss
PostCSS把扩展的语法和特性(比如变量,混入,未来css预发,内联图像等)转换成现代的浏览器友好的CSS
Github:
https://github.com/postcss/gulp-postcss

19.gulp-usemin(不推荐使用)
根据预先在html文件(或者其它模板/视图中的文件)中声明好的blocks来执行一系列任务(例如合并文件并重全名、排除一些只在开发过程中引入的脚本以及将css和js中的代码提取出来内嵌在html文件中)来处理未优化的样式和脚本
Github:
https://github.com/pursual/gulp-usemin

20.gulp-htmlmin
压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作
Github:
https://github.com/jonschlinkert/gulp-htmlmin

21.gulp-imagemin
压缩常见的图片格式,比如PNG,JPEG,GIF,甚至是SVG图片
Github:
https://github.com/sindresorhus/gulp-imagemin

22.gulp-clean-css
压缩css文件,减小文件大小,并给引用url添加版本号避免缓存
Github:
https://github.com/scniro/gulp-clean-css

23.gulp-uglify
专业压缩js文件,减小文件大小
Github:
https://github.com/terinjokes/gulp-uglify

24.gulp-rename
修改文件名称,比如有时我们需要把app.js改成app.min.js
Github:
https://github.com/hparra/gulp-rename

25.gulp-util
gulp工具包,可以打log啊,提示语颜色啊,提示音啊等等一些操作,不过一般就是用来打印日志。。。
Github:
https://github.com/gulpjs/gulp-util

26.gulp-rev
根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系
Github:
https://github.com/sindresorhus/gulp-rev

27.gulp-rev-replace
配合 gulp-rev 使用,拿到生成的 manifest。json 后替换对应的文件名称
Github:
https://github.com/jamesknelson/gulp-rev-replace

28.gulp-sourcemaps
处理 JavaScript 时生成 SourceMap
Github:
https://github.com/gulp-sourcemaps/gulp-sourcemaps

29.gulp-svg-symbols
合并SVG图标
Github:
https://github.com/Hiswe/gulp-svg-symbols

30.gulp-inject-string
在页面中插入内容
Github:
https://github.com/mikehazell/gulp-inject-string

31.gulp-replace
字符串替换的gulp 插件
Github:
https://github.com/lazd/gulp-replace

32.gulp-flatten
删除或替换文件的相对路径
Github:
https://github.com/armed/gulp-flatten

33.lazypipe
Lazypipe允许您创建一个不可变的、延迟初始化的管道。能在需要重用部分管道的环境中使用,比如gulp。它可以创建一些工厂来把你经常使用的功能 stream 链分离出来,变成一个通用插件功能链,然后放入需要这个链的链路上
Github:
https://github.com/OverZealous/lazypipe

34.event-stream
流操作,还不大清楚其原理
Github:
https://github.com/dominictarr/event-stream

35.gulp-autoprefixer
给CSS添加前缀,解决某些CSS属性不是标准属性,有各种浏览器前缀的情况,灰常有用
Github:
https://github.com/sindresorhus/gulp-autoprefixer

36.gulp-posthtml
html预处理 html中的rem转换等
Github:
https://github.com/posthtml/gulp-posthtml

37.postcss-pxtorem
CSS 转换 pxrem
Github:
https://github.com/cuth/postcss-pxtorem

38.envify
Github:
https://github.com/hughsk/envify

39.vinyl-source-stream
在gulp或虚拟文件的流开始使用传统的文本流,对现有的npm流有更好的互操作性
Github:
https://github.com/hughsk/vinyl-source-stream

40.babelify
Github:
https://github.com/babel/babelify

41.cssify和lessify
borwserify 支持 require css样式及less样式
Github:
https://github.com/davidguttman/cssify
https://github.com/dstokes/lessify

42.preprocessify
条件注释/主要区分开发和上线环境,是否加载mock数据
Github:
https://github.com/bibliolabs/preprocessify

43.lodash
具有一致接口、模块化、高性能等特性的 JavaScript 扩展工具库
Github:
https://github.com/lodash/lodash
官方网站:
https://lodash.com/

44.gulp-size
压缩字体文件
Github:
https://github.com/sindresorhus/gulp-size

45.gulp-size
压缩字体文件
Github:
https://github.com/sindresorhus/gulp-size

46.imagemin-pngquant
压缩png图片文件
Github:
https://github.com/sindresorhus/gulp-size

47.gulp-rev-delete-original
删除由gulp-rev或gulp-rev-all重写的原始文件
Github:
https://github.com/nib-health-funds/gulp-rev-delete-original

48.gulp-rev-css-url
提取样式中的相对路径
Github:
https://github.com/galkinrost/gulp-rev-css-url

49.gulp-rev-css-url
提取样式中的相对路径
Github:
https://github.com/galkinrost/gulp-rev-css-url

50.gulp-strip-debug
去掉console代码
Github:
https://github.com/sindresorhus/gulp-strip-debug

51.gulp-cdnify
CDN地址替换
Github:
https://github.com/kaiqigong/gulp-cdnify

猜你喜欢

转载自blog.csdn.net/liuyuqin1991/article/details/78606125
今日推荐