介绍
connect-static-transform 是一个可以将静态文件做实时转换的 express 连接器。它可以用来编译 CoffeeScript、Less、Stylus 或者 Markdown。
使用 connect-static-transform，你可以在你的开发环境中使用 LESS 或 CoffeeScript，在生产环境中使用编译后的样式和脚本。这个库的使用非常简单，只需要有一个目录，里面存放着需要被转换的文件。
安装
使用这个命令安装 npm 包：
npm install connect-static-transform --save
使用
connect-static-transform 作为一个 express 中间件使用。你可以像下面这样使用它：
-- -------------------- ---- -------
--- ------- - -------------------
--- --------------- - ------------------------------------
--- --- - ----------
-------------------------
------- --------- - ----------
-------------- -----
------------- -
------- -------------------------
----- ----------------
-
----
-----------------参数
以下是可配置的选项：
- srcDir：相对于当前目录的源代码目录
- appendSrcPath：如果为真，将源路径添加到每个请求的响应中
- debug：如果为真，将作为 HTML 注释添加到请求响应中以指示转换行为
- transformers：与扩展名对应的转换器
示例
以下代码是一个简单的 express 应用程序，显示了一个使用 connect-static-transform 的 HTML 页面。这个页面上有一个按钮，当你点击它时，可以看到一段经过 LESS 编译的 CSS 代码：
-- -------------------- ---- -------
--- ------- - ------------------
- --------------- - -----------------------------------
- ---- - ----------------
--- --- - ---------
----------------------
------- --------- - ----------
-------------- -----
------ -----
------------- -
-------- -------------- ----- --- -
--- ------ - --- ------------- ------ ------ ---
------------------ -------- ----- ----- -
-- ----- ------ --------
--- -
-------- --------------
- -------- -
------
-
---
-
-
---
----------------------------- - -----------
------------------ -----
----------------------------- -------------
----------
--------- ------
-------
-------
------------------------------- ---- -------------
----- ---------------- --------------------------------
------- -----------------------------------
--------
-------
---------------------------- ---- ----------
----
---- -- -- ------- -- ------------ ---- -- --- --- ----- --------------------------
-------- --- ------ ----- ------ --- - --- ---------- -- --- ------
-----
------- ------------------ -------------
---------
--- --------- - ------------
--- - - --------------------------------
---------------------------
---
----------------------------------------------------------- ------------
----------
--------
--------
---
--
--------------
---------------------- -- ---- -------在这个例子中，我们希望使用一个自定义的转换器，所以我们传递了一个匿名函数作为 .less 扩展名的转换器。这个函数实例化一个 less.Parser，读取文件内容并将其转换为 CSS。最后，我们使用 cb 回调函数来将处理后的 CSS 代码返回回去。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822cf2