简介
gulp-cmd-norm 是一个基于 gulp 和 CMD 规范的前端构建工具，能够将 CMD 规范的模块转换成浏览器可直接执行的模块。同时，gulp-cmd-norm 还提供了代码压缩、代码合并、文件头部添加 banner 等功能。
本篇文章将详细讲解如何使用 gulp-cmd-norm 实现前端构建工作，并给出详细的示例代码和解释。
安装
使用 gulp-cmd-norm 之前，需要安装以下工具：
安装完成之后，在项目根目录下打开终端，输入以下命令安装 gulp-cmd-norm：
--- ------- ------------- ----------
使用
gulp-cmd-norm 的使用非常简单：
在 gulpfile.js 中引入 gulp 和 gulp-cmd-norm：
----- ---- - ---------------- ----- --- - -------------------------
编写 gulp 任务：
--------------- ---------- - ------ ----------------------- ------------ ------------------------- ---该任务将 src 目录中的所有 JS 文件处理后输出到 dist 目录中。
在命令行中执行任务：
---- --
该命令将执行名为 js 的 gulp 任务，将 src 目录中的 JS 文件处理后输出到 dist 目录中。
功能
gulp-cmd-norm 提供了以下功能：
CMD 规范转换
gulp-cmd-norm 能够将 CMD 规范的模块转换成浏览器可直接执行的模块。它支持以下类型的模块：
- define
- require
- require.async
- module.exports
- exports
这些模块的用法请见 AMD 规范和 CMD 规范。
例如，gulp-cmd-norm 能够将以下代码：
----------------- ----------- ----------- ------------ --- -
--- ------- - ---
------------- - ---------- ---
------------- - ---------- ---
------ --------
---转换成以下代码：
----------- -
--- -- - -------------------
--- -- - -------------------
--- ------- - ---
------------- - ---------- ---
------------- - ---------- ---
-------------- - --------
-----代码压缩
gulp-cmd-norm 能够压缩 JS 代码，减小文件体积。压缩代码使用了 uglify-js。
代码合并
gulp-cmd-norm 能够将多个 JS 文件合并成一个文件，减小 HTTP 请求次数，从而减小页面加载时间。
Banner
gulp-cmd-norm 能够在处理后的文件头部添加 banner，用于注释版权信息、作者信息等。
添加 banner 可以在 gulp 任务中的 cmd() 函数中添加 options 参数，如下所示：
--------------- ---------- -
------ -----------------------
----------- ------- ---- ---- -- - ------ --- ---
-------------------------
---示例代码
以下是一个使用 gulp-cmd-norm 的示例项目：
- ------- -- ---- -- --- - -- ---------- - -- ---------- - -- ------- -- ----------- -- ------------
src/module1.js
----------------- ------------ ------------ -
--- ------- - ---
------------- - ---------- ---
------------- - ---------- ---
------ --------
---src/module2.js
----------------- --- ---------- -
--- ------- - ---
------------- - ---------- ---
------------- - ---------- ---
------ --------
---src/main.js
--- -- - ------------------- --- -- - ------------------- ----------- -----------
gulpfile.js
----- ---- - ----------------
----- --- - -------------------------
--------------- ---------- -
------ -----------------------
-----------
------- ---- ---- -- -- ---
---
-------------------------
---
-------------------- -------------------在终端中输入 gulp 命令，即可对 src 目录中的 JS 文件进行处理。处理后的文件目录如下：
- ------- -- ---- - -- ---------- - -- ---------- - -- ------- -- --- - -- ---------- - -- ---------- - -- ------- -- ----------- -- ------------
处理后，所有 JS 文件都被转换成了浏览器可直接执行的模块，头部添加了注释版权信息，最后输出到 dist 目录中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e6d9381d61a3540b28