必知
- 不建议全局安装
gulp - 如果已经将
gulp安装在了全局环境,请先执行npm rm --global gulp移除gulp - 全局安装
gulp命令行工具npm install --global gulp-cli - 在你需要的目录下初始化
package.json文件 - 安装
gulp作为开发时的依赖npm install --save-dev gulp - 在对应的目录下创建
gulpfile.js文件 - 要构建的话,只需要在对应的目录下执行
gulp即可 - 运行之后默认任务(task)将执行,因为任务为空,因此没有实际动作
gulp是什么
gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
每个 gulp 任务(task)都是一个异步的 JavaScript 函数,此函数是一个可以接收 callback 作为参数的函数,或者是一个返回 stream、promise、event emitter、child process 或 observable 类型值的函数
gulp任务
- 公开任务:从 gulpfile 中被导出(export),可以通过
gulp命令直接调用。 - 私有任务:被设计为在内部使用,通常作为
series()或parallel()组合的组成部分。 导出(export)将会是主要的注册任务的主要机制。 - 组合任务:
series()和parallel()这两个方法都可以接受任意数目的任务(task)函数或已经组合的操作。并且二者可以互相嵌套任意深度。 series()让任务按照顺序执行parallel()并发运行任务- 当从任务(task)中返回 stream、promise、event emitter、child process 或 observable 时,成功或错误值将通知 gulp 是否继续执行或结束。
- 如果任务(task)不返回任何内容,则必须使用 callback 来指示任务已完成。
- 不再支持同步任务
文件处理相关
- gulp 暴露了
src()和dest()方法用于处理计算机上存放的文件。 src()方法接受一个glob字符串或由多个 glob 字符串组成的数组作为参数,并从文件系统中读取文件然后生成一个 Node 流(stream)。- 流(stream)所提供的主要的 API 是
.pipe()方法,用于连接转换流(Transform streams)或可写流(Writable streams)。 - 大多数情况下,利用
.pipe()方法将插件放置在src()和dest()之间,并转换流(stream)中的文件。 glob是由普通字符和/或通配字符组成的字符串,用于匹配文件路径。- glob常用的匹配方式
*(一个星号)**(两个星号)!(取反)。 Gulp 插件实质上是 Node 转换流(Transform Streams),它封装了通过管道(pipeline)转换文件的常见功能,通常是使用.pipe()方法并放在src()和dest()之间。他们可以更改经过流(stream)的每个文件的文件名、元数据或文件内容。- 可以在 插件搜索页面 找到你需要的插件。
- 插件应当总是用来转换文件的。
具体的API请参考官方文档