在前端开发中，我们经常需要对网站进行静态构建（Static Site Generation），将一些静态页面编译、合并、优化后输出到一个或多个目录中，以便于部署到服务器或 CDN 上。在这个过程中，一个好的静态网站生成工具能够帮助我们提高工作效率，并保证生成的网站的质量。
Metalsmith 是一个简单而灵活的静态网站生成器，它以文件夹为基础，可以将 markdown、HTML、CSS、JS、CoffeeScript、Jade 等文件转换为完整的静态网站。而 metalsmith-coffee 则是 Metalsmith 上针对 CoffeeScript 的插件，使用它可以将 CoffeeScript 代码转换为 JavaScript，使之可以在浏览器中运行。
本文将为大家介绍如何使用 npm 包 metalsmith-coffee 来完成静态网站的开发工作。
安装
在使用 metalsmith-coffee 之前，我们需要先在项目中安装它，方法如下：
--- ------- ---------- -----------------
配置
在使用 metalsmith-coffee 之前，我们需要先在 Metalsmith 的配置文件中进行配置。
----- ---------- - ----------------------
----- ------ - -----------------------------
---------------------
-------------- -- ----
--------------------- -- ----
-------------- -- -- -----------------
---------- -- -
-- ----- -
-------------------
- ---- -
------------------ -------------
-
---在上面的代码中，我们首先引入了 Metalsmith 和 metalsmith-coffee 两个库，然后创建了一个 Metalsmith 的实例，指定了源目录和输出目录，并通过 use 方法使用 metalsmith-coffee 插件将 CoffeeScript 转换为 JavaScript。
使用
在配置好 metalsmith-coffee 之后，我们就可以开始使用它了。假定我们有一个名为 index.coffee 的文件，代码如下所示：
----- - ------ -- ------------------- ---------- --------------
其中，greet 函数会输出一条问候语，而 greet('world') 会调用 greet 函数并传入参数 'world'。
经过 metalsmith-coffee 的转换，该文件将被转换为一个名为 index.js 的文件，代码如下所示：
--- ------ ----- - -------------- - ------ ------------------- - - ---- - ----- -- ---------------
如此一来，我们就可以在浏览器中运行该脚本了。
示例
下面我们将给出一个完整的使用 metalsmith-coffee 进行静态网站开发和构建的示例。
首先，创建一个名为 my-website 的文件夹，然后在其中创建以下目录和文件：
- --- ------------ --- --- - --- ------------ - --- ---------- --- -------------
其中，index.coffee 中的代码如下所示：
----- - ------ -- ------------------- ---------- --------------
style.less 中的代码如下所示：
---- - ----------------- -------- ------ ----- -
在命令行中运行以下命令来初始化项目：
--- ---- -- --- ------- ---------- ---------- --------------- -----------------
在 metalsmith.js 文件中写入以下代码：
----- ---------- - ----------------------
----- ---- - ---------------------------
----- ------ - -----------------------------
---------------------
--------------
---------------------
-------------
----- ----
---
------------
---------- -- -
-- ----- -
-------------------
- ---- -
------------------ -------------
-
---在命令行中运行以下命令来生成静态网站：
---- -------------
最后，你可以在 build 目录中找到生成的静态网站了。打开 index.html，你将看到一条问候语和一个白色背景的页面。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f3e1d8e776d08040b24