Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

全栈开发小学生
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Mysql

  • PHP

  • Python

  • java

  • Go

  • 数据库

  • C#

  • ElasticSearch

  • Git

  • Gulp

    • gulp快速入门
    • JavaScript 和 Gulpfile
      • Gulpfile 详解
      • Gulpfile 转译
      • Gulpfile 分割
    • 使用 gulp 压缩 JS
    • 使用 gulp 压缩 CSS
    • 使用 gulp 处理 SASS
    • 使用 gulp 配置 tailwindcss + sass
  • Microsoft

  • Linux

  • 其它

  • 技术
  • Gulp
mrcdh
2021-02-02
目录

JavaScript 和 Gulpfile

Gulp 允许你使用现有 JavaScript 知识来书写 gulpfile 文件,或者利用你所掌握的 gulpfile 经验来书写普通的 JavaScript 代码。虽然 gulp 提供了一些实用工具来简化文件系统和命令行的操作,但是你所编写的其他代码都是纯 JavaScript 代码。

# Gulpfile 详解

gulpfile 是项目目录下名为 gulpfile.js (或者首字母大写 Gulpfile.js,就像 Makefile 一样命名)的文件,在运行 gulp 命令时会被自动加载。

在这个文件中,你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API,除此之外,纯 JavaScript 代码或 Node 模块也会被使用。

任何导出 (export) 的函数都将注册到 gulp 的任务 (task) 系统中。

# Gulpfile 转译

你可以使用需要转译的编程语言来书写 gulpfile 文件,例如 TypeScript 或 Babel,通过修改 gulpfile.js 文件的扩展名来表明所用的编程语言并安装对应的转译模块。

对于 TypeScript,重命名为 gulpfile.ts 并安装 ts-node 模块。

对于 Babel,重命名为 gulpfile.babel.js 并安装 @babel/register 模块。

# Gulpfile 分割

大部分用户起初是将所有业务逻辑都写到一个 gulpfile 文件中。随着文件的变大,可以将此文件重构为数个独立的文件。

每个任务 (task) 可以被分割为独立的文件,然后导入(import)到 gulpfile 文件中并组合。这不仅使事情变得井然有序,而且可以对每个任务 (task) 进行单独测试,或者根据条件改变组合。

Node 的模块解析功能允许你将 gulpfile.js 文件替换为同样命名为 gulpfile.js 的目录,该目录中包含了一个名为 index.js 的文件,该文件被当作 gulpfile.js 使用。并且,该目录中还可以包含各个独立的任务 (task) 模块。

#gulp
上次更新: 2023/09/22, 16:54:32
gulp快速入门
使用 gulp 压缩 JS

← gulp快速入门 使用 gulp 压缩 JS→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×