gulp简单了解

48 阅读3分钟

必知

  • 不建议全局安装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)将执行,因为任务为空,因此没有实际动作

image.png

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请参考官方文档