Gulp是一个非常棒的自动化构建工具, 这是一份内部分享的材料, 包括一个slide, 一个demo, 我用过的 Gulp 插件介绍以及一些 recipes.
如果你有更好的展示形式或者更好的资料, 欢迎star, 发pr哦.
请看demo目录下, (node4以上, gulp4.0) 注意: 确保版本正确, 在slide中有相关介绍.
注意: 每一个recipe都会有一个 gulpfile, 一个 readme. 前者是代码, 基本可以直接用, 后者是说明. 新开了一个 issue
如果你有什么想要了解的 gulp 任务, 可以给我留言.
- recipes/copy 拷贝文件
- recipes/delete 删除文件
- recipes/plumber 不中断Gulp任务且弹出系统通知
- recipes/yargs 使用命令行参数(yargs) 来控制任务逻辑 (gulp-if) (选择性压缩文件和生成sourcemap)
- gulp-sass - 将 Sass 编译成 CSS
- gulp-less - Less 编译成 CSS.
- gulp-stylus - Stylus 编译成 CSS.
- gulp-autoprefixer - 添加厂商前缀
- gulp-typescript - TypeScript 编译成JavaScript.
- gulp-babel - ES6编译成ES5
- gulp-concat - 合并文件.
- gulp-clean-css - 压缩 CSS
- gulp-uglify - 压缩 JavaScript
- gulp-sourcemaps - 生成 source maps
- gulp-htmlmin - 压缩 HTML 通过
- gulp-imagemin - 压缩 PNG, JPEG, GIF and SVG 图片
- gulp-svgmin - 压缩 SVG 文件
- gulp-inject - 将指定的css或js文件以标签的形式插入到HTML中的指定标志内。
- run-sequence - 按照顺序执行task (注意: 在 Gulp4.0 中, 已经提供了 gulp.series 方法)
- gulp-if - If-Else-流程控制
- gulp-ignore - 选择性过滤文件
- gulp-filter - 过滤文件, 和 gulp-ignore感觉类似
- merge-stream - Merge multiple streams into one interleaved stream.
- event-stream - 方便操作stream
- gulp-plumber - Prevent pipe breaking caused by errors.
- gulp-notify - 系统通知
- gulp-changed - 只通过修改过的文件
- gulp-changed-in-place - 只通过修改过的文件
- 区别? gulp-changed 比较的是生成的文件, gulp-changed-in-place比较的是源文件, 复杂情况用后者. (比如需要babel的时候)
- gulp-order - 重新对文件进行排序 (引入顺序重要的话, 这个插件结合 event-stream 是神器)
- gulp-csslint - 通过CSSLint自动校验CSS.
- gulp-eslint - ECMAScript/JavaScript代码校验.
- gulp-angular-templatecache - 在$templateCache中联系并注册AngularJS模板
- gulp-ng-html2js - 将html转化为js文件, 感觉和 gulp-angular-templatecache 差不多
- gulp-ng-annotate - 自动添加依赖注入
- gulp-iife - 将js文件包裹在一个立即执行函数中.
- gulp-size - 输出文件打下
- gulp-util - 一些工具方法
- gulp-replace - 字符串替换 (参考 如何替换掉babel生成的全局'use strict')
- gulp-rename - 重命名文件
- gulp-rev -给静态文件打版本号 unicorn.css → unicorn-d41d8cd98f.css.
- del - Delete files/folders using globs.
- yargs - 处理 process.argv
- require-dir 分离gulp任务到多个文件
- browser-sync -同步多浏览器