npm 包 gulp-cmd-norm 使用教程

简介

gulp-cmd-norm 是一个基于 gulp 和 CMD 规范的前端构建工具，能够将 CMD 规范的模块转换成浏览器可直接执行的模块。同时，gulp-cmd-norm 还提供了代码压缩、代码合并、文件头部添加 banner 等功能。

本篇文章将详细讲解如何使用 gulp-cmd-norm 实现前端构建工作，并给出详细的示例代码和解释。

安装

使用 gulp-cmd-norm 之前，需要安装以下工具：

• Node.js
• npm
• gulp

安装完成之后，在项目根目录下打开终端，输入以下命令安装 gulp-cmd-norm：

npm install gulp-cmd-norm --save-dev

使用

gulp-cmd-norm 的使用非常简单：

1. 在 gulpfile.js 中引入 gulp 和 gulp-cmd-norm：

   const gulp = require('gulp');
   const cmd = require('gulp-cmd-norm');

2. 编写 gulp 任务：

   gulp.task('js', function() {
       return gulp.src('src/**/*.js')
           .pipe(cmd())
           .pipe(gulp.dest('dist'));
   });

   该任务将 src 目录中的所有 JS 文件处理后输出到 dist 目录中。

3. 在命令行中执行任务：

   gulp js

   该命令将执行名为 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 能够将以下代码：

define('module1', ['module2', 'module3'], function(m2, m3) {
    var exports = {};
    exports.func1 = function() {};
    exports.func2 = function() {};
    return exports;
});

转换成以下代码：

(function() {
    var m2 = require('module2');
    var m3 = require('module3');
    var exports = {};
    exports.func1 = function() {};
    exports.func2 = function() {};
    window.module1 = exports;
})();

代码压缩

gulp-cmd-norm 能够压缩 JS 代码，减小文件体积。压缩代码使用了 uglify-js。

代码合并

gulp-cmd-norm 能够将多个 JS 文件合并成一个文件，减小 HTTP 请求次数，从而减小页面加载时间。

Banner

gulp-cmd-norm 能够在处理后的文件头部添加 banner，用于注释版权信息、作者信息等。

添加 banner 可以在 gulp 任务中的 cmd() 函数中添加 options 参数，如下所示：

gulp.task('js', function() {
    return gulp.src('src/**/*.js')
        .pipe(cmd({ banner: '/*! This is a banner */' }))
        .pipe(gulp.dest('dist'));
});

示例代码

以下是一个使用 gulp-cmd-norm 的示例项目：

- project
  |- dist
  |- src
  |  |- module1.js
  |  |- module2.js
  |  |- main.js
  |- gulpfile.js
  |- package.json

src/module1.js

define('module1', ['module2'], function(m2) {
    var exports = {};
    exports.func1 = function() {};
    exports.func2 = function() {};
    return exports;
});

src/module2.js

define('module2', [], function() {
    var exports = {};
    exports.func1 = function() {};
    exports.func2 = function() {};
    return exports;
});

src/main.js

var m1 = require('module1');
var m2 = require('module2');
m1.func1();
m2.func2();

gulpfile.js

-- -------------------- ---- -------
----- ---- - ----------------
----- --- - -------------------------

--------------- ---------- -
    ------ -----------------------
        -----------
            ------- ---- ---- -- -- ---
        ---
        -------------------------
---

-------------------- -------------------

在终端中输入 gulp 命令，即可对 src 目录中的 JS 文件进行处理。处理后的文件目录如下：

-- -------------------- ---- -------
- -------
  -- ----
  -  -- ----------
  -  -- ----------
  -  -- -------
  -- ---
  -  -- ----------
  -  -- ----------
  -  -- -------
  -- -----------
  -- ------------

处理后，所有 JS 文件都被转换成了浏览器可直接执行的模块，头部添加了注释版权信息，最后输出到 dist 目录中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e6d9381d61a3540b28