npm 包 jade-linker 使用教程

前言

在前端开发中，我们经常需要将网页或组件分为多个页面或模块进行开发。但是，如果每次修改某个模块的 html 内容时都需要手动更新其依赖模块的模板引用，那么我们的工作量会倍增。实际上，使用 jade-linker 这个 npm 包可以轻松实现自动化的模板引用更新，从而节省我们的时间和精力，提高开发效率。

安装

首先，我们需要安装 jade-linker 这个 npm 包。在命令行中输入：

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

当然，如果你想将其局部安装，可以用：

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

使用

安装完毕后，我们就可以通过以下命令来使用 jade-linker：

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

这个命令中，-w 参数指定输入目录，-o 参数指定输出目录，即：

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

这个命令的效果是将 src/views 目录下所有的 .jade 文件中的依赖替换成编译后的实际 html 文件，并将其输出到 dist/views 目录下。

示例代码

我们来看一个例子：

src/views/base.jade

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

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

src/views/index.jade

------- ----

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

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

src/views/header.jade

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

src/views/footer.jade

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

src/views/scripts.jade

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

运行以下命令：

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

这个命令就会将以上五个 .jade 文件转为以下对应的 .html 文件：

dist/views/base.html

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

dist/views/index.html

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

dist/views/header.html

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

dist/views/footer.html

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

dist/views/scripts.html

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

通过上面的转换，我们可以看到 jade-linker 将原本分散的 .jade 文件自动合并到了对应的 .html 文件中。这对于前端开发来说，是一个非常方便的工具，也是我们不容错过的 npm 包。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/77785

阅读全文

猜你喜欢

  • npm 包 droppy 使用教程

    简介 droppy 是一个轻量级的网页版文件管理器，支持简单的文件上传、下载、预览等功能，适用于各种前端应用场景。它使用 Node.js 和 WebSocket 技术实现，可通过 NPM 包的方式轻松...

    5 年前
  • npm 包 karma-threshold-reporter 使用教程

    前言 karma-threshold-reporter 是一个 npm 包，提供了一个 Custom Reporter，可以让 karma 在测试结束后输出测试覆盖率结果。

    5 年前
  • npm 包 divhide 使用教程:

    npm 包 divhide 使用教程: 在前端开发中，一个好的库可以大大提高开发效率，divhide就是一个很实用的 npm 包。divhide 是基于 JavaScript 的库，主要功能是对 DO...

    5 年前
  • npm 包 grunt-http-server 使用教程

    在前端开发中，使用本地服务器进行测试是必不可少的环节。引入 grunt-http-server 插件，可以轻松搭建一个本地服务器，方便测试和开发。 本文将详细介绍如何使用 grunt-http-ser...

    5 年前
  • npm 包 pegjs-coffee-plugin 使用教程

    本篇教程将为您介绍如何使用 npm 包 pegjs-coffee-plugin，帮助您更好地处理语言识别及编译。本文内容详尽，适合有一定前端基础的读者参考。 什么是 pegjs-coffee-pl...

    5 年前
  • npm 包 dry-lang 使用教程

    什么是 dry-lang dry-lang 是一个基于 JavaScript 的模板引擎，可以自定义模板语言，支持模板热替换、模块化、局部模板等特性，非常适合前端开发使用。

    5 年前
  • npm包drive使用教程

    在前端开发过程中，我们通常需要在项目中引用不同的第三方库，以提高效率和增强网站功能。npm包是用来管理这些第三方库的工具之一。本文将介绍如何使用一个叫做 drive 的 npm 包，它是一个将 Goo...

    5 年前
  • npm包Builder-amd使用教程

    前言 在Web前端开发中，AMD (Asynchronous Module Definition) 模块化开发规范越来越流行。 各类JavaScript的库，例如jQuery、AngularJS、Re...

    5 年前
  • npm 包 builder-amd-css 使用教程

    前言 在前端开发中，我们经常会用到各种第三方库和框架，在使用这些资源时，我们需要关注到如何引入这些依赖包。而在使用依赖包的过程中可能会遇到一些问题，比如依赖包的加载顺序在某些情况下可能会影响代码的运行...

    5 年前
  • npm 包 builder-jquery-css 的使用教程

    简介 builder-jquery-css 是一个 npm 包，它可以帮助前端开发者快速地构建一个基于 jQuery 和 CSS 的项目，使项目的开发效率得到极大提升。

    5 年前
  • requirejs-memfiles 使用教程

    在前端开发中，我们常常需要使用模块化框架来管理代码，而 requirejs 是一个广泛应用的前端模块化工具。为了方便开发，我们可以使用 requirejs-memfiles 这个 npm 包，它提供了...

    5 年前
  • npm 包 node-packager 使用教程

    简介 node-packager 是一个非常有用的 npm 包，它允许你轻松打包你的 node 应用程序。使用 node-packager 可以将你的应用程序打包成适用于不同系统的二进制文件，如 Wi...

    5 年前
  • npm 包 jquery-ui-themeroller 使用教程

    jQuery UI 是一个经典的前端 UI 库，它是由 jQuery 团队开发的一个 UI 组件集合。其中的组件样式是基于皮肤轮廓模型 (ThemeRoller) 开发的，可以方便地定制和风格化。

    5 年前
  • npm 包 download.jqueryui.com 使用教程

    简介 “download.jqueryui.com” 是 jQuery UI 的 NPM 包下载地址，其中包含了 jQuery UI 的各个版本。jQuery UI 是一个广泛应用于前端界面的 Jav...

    5 年前
  • npm 包 rxc 使用教程

    rxc 是一款基于 Rxjs 的 Javascript 库，能够将一些异步操作转化为响应式编程方式，可以使得异步编程更加简单、可控、可读性更好。下面本文将会详细介绍如何使用 rxc 包实现响应式的异步...

    5 年前
  • npm 包 ekam 使用教程

    在前端开发领域，我们经常需要使用各种各样的 npm 包来解决问题。其中，ekam 是一个非常实用的 npm 包，可以帮助我们进行端到端测试。本文将为大家详细介绍 ekam 的使用方法，并提供一些示例代...

    5 年前
  • npm包ekit-minify使用教程

    简介 ekit-minify是一款基于NodeJS的npm包，可以在前端开发中用来压缩代码和优化文件。通过使用ekit-minify，可以将你的JavaScript、CSS和HTML文件进行压缩，以减...

    5 年前
  • npm 包 ejs-crunch 使用教程

    介绍 ejs-crunch 是一个优化 ejs 模板文件大小的 npm 包。通过压缩 ejs 模板文件，它可以大幅减少文件大小并提高网页加载速度。ejs-crunch 具有相对简单的使用方式，在本文中...

    5 年前
  • npm 包 ejsinbrowser 使用教程

    前言 在前端开发中，模板引擎是不可或缺的工具。ejs 是其中一种常用的模板引擎，它允许我们通过嵌套的 JavaScript 片段来动态地生成 HTML。ejsinbrowser 是一个能够使 ejs ...

    5 年前
  • npm 包 ejs-bundler 使用教程

    介绍 在前端开发过程中，经常使用模板引擎来处理页面和数据的动态渲染。ejs-bundler 是一个简单易用的前端模板引擎，它可以将 ejs 模板文件打包为一个 JavaScript 函数，方便在浏览器...

    5 年前

相关推荐

    暂无文章