npm 包 grunt-jade-creplace 使用教程

阅读时长 4 分钟读完

什么是 grunt-jade-creplace?

grunt-jade-creplace 是一个基于 Grunt 的插件,它可以帮助我们在 Jade 模板引擎中进行 HTML 片段的替换操作。它可以在构建过程中自动替换标记(包括代替符),还可以在运行时通过任务调用进行动态替换。

安装

使用 npm 可以很容易地安装 grunt-jade-creplace:

配置

在 Gruntfile.js 中添加以下配置项:

-- -------------------- ---- -------
------------------
  ------------- -
    -------- -
      ------------- --
        ----- ----------------
        --- ------------ ------------------------
      --
    --
    ------------ -
      ------ --
        ------- -----
        ---- ------
        ---- -----------
        ----- -------
        ---- -------
      --
    -
  -
---
展开代码

这里需要注意的是,from 和 to 属性指定了需要被替换的字符串和替换后的字符串。如果要进行多个替换操作,只需要在 options.replacements 数组中添加多个对象即可。

使用

使用 grunt-jade-creplace 的方式有两种:自动替换和手动替换。

自动替换

使用 grunt-contrib-jade 插件并开启源码的替换(includeSources选项非false)自动进行 Jade 模板编译时的自动替换。

-- -------------------- ---- -------
------------------
  ----- -
    -------- -
      -------- -
        ------- ------
        ------- -----
        ------ ------
        --------- ------
        ------- ---
        ---------- ------
        ---- ------
        ------------- ------
        ------------ -------- ---------- -
          ------ --------------------------- ----
        --
        -------- ---------
        ------------- ------
        ------ ------
        ----------------------- ------
        --------- ------
        ----- ------
        ----------- ------
        --------- ------
        --------------- ---- -- -------------- ----- ----
      --
      ------ --
        ------- -----
        ---- ------
        ---- -----------
        ----- -------
        ---- -------
      --
    -
  -
---
展开代码

手动替换

使用下面的 grunt-cmd-tasks 例子指定某个文件替换。

-- -------------------- ---- -------
--------------------------- -
  ----- -
    ---- ------------------
    ---------- -----
    ------------- -- -- ----- ------------------- -- --------------------
      ----- ----------------
      --- ------------ ------------------------
    --
  -
---
展开代码

示例代码

以下是一个使用 grunt-jade-creplace 的示例:

将上面的 Jade 模板保存为 test.jade 文件,然后运行 Grunt 任务,grunt-jade-creplace 就会自动将 <head></head> 标记替换成 <head><meta charset="utf-8"></head>

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/71717

纠错
反馈

纠错反馈