使用 Broccoli-hbs 包的教程

使用 Broccoli-hbs 包的教程

前端开发非常依赖于一些工具和库。本篇文章将重点介绍 Broccoli-hbs 包，这是一个基于NodeJS的用于构建Web应用程序的工具。我们将深入了解npm包的使用、它带来的好处，并分享如何使用该工具构建你自己的Web应用程序。

什么是 Broccoli-hbs 包

在介绍如何使用 Broccoli-hbs 包之前，我们先来谈谈它是什么。简而言之，Broccoli-hbs 包可以让你在构建Web应用程序的过程中，使用Handlebars模板系统。Handlebars是一种JavaScript模板引擎，用于在应用程序中动态生成HTML代码。它支持基本语法和通用模板构造，可以帮助你快速开发网站的前端部分。

作为一个Broccoli插件，Broccoli-hbs可以允许你预先编译Handlebars模板文件，并将生成的HTML文本输出到静态文件中。这个吉祥物和名称是来自Vegetable： Broccoli. 这个包支持许多类型的文件的自动处理，比如coffeescript文件自动加入一个编译器等等。

何为 broccoli ？

Broccoli是JavaScript的一个资源pipeline，你可以把它看成著名的Grunt / Gulp之类的构建流程工具的下一代版本，可以用它搭建自己的web应用的工具流。它支持并行执行、高效缓存和紧凑的包大小等特性，可以让你构建快速、健壮和可重复使用的Web应用程序。

使用Broccoli库中的函数和代码可以从磁盘加载输入，处理它们并输出到另一个目录，这通常是Web应用程序所需要的目录。您还可以使用Broccoli集成其他东西，如concurrently和nodemon，以便更快地开发Web应用程序。

安装和配置 Broccoli-hbs 包

在使用 Broccoli-hbs 包之前，你需要先安装它。你可以使用npm在你的项目中安装 Broccoli-hbs 包：

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

安装完成后，就可以开始为你的应用程序配置构建操作了。下面是配置文件示例：

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

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

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

在上述的例子中，我们构造了一个Broccoli树，使用了两个在npm上找到的包：broccoli-merge-trees和broccoli-hbs。该树包含在app/templates和app/partials目录中的Handlebars模板，它们将被编译成带有.html扩展名的设备的HTML文件。

你还可以使用Broccoli-hbs来生成其他类型的文本文件，例如JS/CSS文件，这里Codepen的例子演示了如何为Web应用程序生成CSS文件：

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

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

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

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

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

使用 Broccoli-hbs 包

现在你已经安装和配置了 Broccoli-hbs 包，我们来看看如何在实际项目中使用它。下面是一个使用 Broccoli-hbs 包的应用示例：

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

在此行动中，我们将使用Broccoli-hbs编译/app/templates/index.hbs文件，并将其放置在/dist/index.html文件中。我们还将使用Broccoli传输器复制/app/style.css和/app/app.js文件并放置在/dist/style.css和/dist/app.js中。

来看看我们的Brocfile.js文件：

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

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

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

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

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

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

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

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

在此代码中，我们首先使用funnel函数从/app文件夹中获取.css和.scss文件，将它们编译成.css ("styles.css") 并将它们存储在/dist/styles.css文件中。

接下来，我们考虑app文件夹，将其与public文件夹(/)和上述处理的样式表一起合并，并将合并树传递到new HbsCompiler()函数中，以便编译来自app/templates文件夹的所有.hbs文件。你可能注意到，在此行动中您的所有模板将具有相同的typescript作为html输出,因为在HbsCompiler的配置选项中设置了outputExtension: 'html'。

最后，我们使用funnel函数将编译好的index.html从树中拿出来，并放到/dist文件夹中。

总结

在这篇文章中，我们看到了Broccoli-hbs包是如何帮助我们使用Handlebars模板系统，预先编译模板文件，并将生成的HTML文本输出到静态文件中的。虽然我们只介绍了包的最基础功能，但是它还有很多强大特性让我们使用，可以用于开发工具集、树合并（如Broccoli-merge-trees）等等。

如果你正在构建一个新的Web应用程序，那么我强烈建议你探索一下Broccoli-hbs包的巨大潜力，它可以将你的前端开发工作高效地完成。

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

阅读全文

猜你喜欢

  • npm包Broccoli-HTML的使用教程

    前言 在前端领域中，模块化的开发已经成为不可避免的趋势。npm包管理器是我们常用的包管理工具，提供了绝大部分前端需要的类库和插件。而Broccoli-HTML就是其中一款用于模块化网站开发的工具包，它...

    4 年前
  • npm 包 broccoli-flatten 使用教程

    在前端开发中，我们经常会遇到需要对打包后的资源进行优化的情况。然而，有些资源会被嵌套在多个文件夹中，这使得我们难以进行优化和管理。在这种情况下，我们需要用到一个 npm 包，即 broccoli-fl...

    4 年前
  • npm 包 broccoli-flow 使用教程

    近年来，前端开发工程师的工作越来越复杂，项目规模也越来越大。在这种背景下，需要一些辅助工具来提高开发效率，而 npm 包 broccoli-flow 就是这样一个工具。

    4 年前
  • npm 包 broccoli-glob-caching-writer 使用教程

    简介 broccoli-glob-caching-writer 是一个 Broccoli 插件，它能够将文件流中的文件进行缓存，并使用 Glob 模式匹配出需要构建的文件，从而提高构建速度。

    4 年前
  • npm 包 Broccoli-Fontcustom 使用教程

    在前端开发中，我们经常需要使用自定义的字体图标来丰富页面的设计。而 Broccoli-Fontcustom 正是一个非常方便的 npm 包，它可以帮助我们使用 SVG 文件生成字体图标，并在项目中快速...

    4 年前
  • Broccoli-front-matter-filter 使用教程

    前言 Broccoli-front-matter-filter 是一个可以帮助前端开发者解析 Markdown 文件中 Front Matter 元数据的 npm 包。

    4 年前
  • npm 包 broccoli-global-exporter 使用教程

    前言 在前端开发中，我们常常需要引入其他第三方库来协助我们进行开发。而 npm 就是前端领域中最流行的包管理工具之一。 在 npm 上有很多非常优秀的前端工具库， broccoli-global-ex...

    4 年前
  • npm 包 broccoli-glob-filter 使用教程

    1. 什么是 broccoli-glob-filter? broccoli-glob-filter 是一个 Node.js 的模块，可以应用于使用 Broccoli 构建工具的前端项目中。

    4 年前
  • npm 包 broccoli-gzip 使用教程

    前言 现在的 Web 应用的体积越来越大，传输文件的时间就会变得越来越长。为了减少文件大小的传输，我们使用压缩技术可以明显减小文件的大小。本文将向大家介绍一个常用的前端压缩工具 —— broccoli...

    4 年前
  • npm包 broccoli-globalize-amd 使用教程

    在前端开发中，需要用到一些工具来处理JavaScript代码的管理和优化。npm是非常方便和广泛应用的包管理工具之一，而broccoli-globalize-amd就是一款基于npm的JavaScri...

    4 年前
  • npm 包 `broccoli-ham` 使用教程

    简介 broccoli-ham 是一个基于 broccoli 的前端构建工具，它能够帮助我们自动化处理前端开发中的构建、打包、优化等任务，提高开发效率和代码质量。 它支持自定义的插件扩展，也是其优势之...

    4 年前
  • npm 包 broccoli-handlebars 使用教程

    前言 Broccoli-handlebars 是一款通过 Broccoli 可以基于 Handlebars 模板进行静态页面编译的 npm 包，广泛应用于前端开发中。

    4 年前
  • npm 包 broccoli-handlebars-commonjs 使用教程

    介绍 在前端开发中，经常需要使用模板引擎来处理页面的渲染。而 broccoli-handlebars-commonjs 就是一个帮助前端开发者在 Broccoli 构建工具中使用 Handlebars...

    4 年前
  • npm 包 broccoli-handlebars-precompiler 使用教程

    简介 broccoli-handlebars-precompiler 是一个适用于 Node.js 应用程序的预编译器，用于将 Handlebars 模板编译成简单的 JavaScript 函数。

    4 年前
  • npm 包 bricks-css 使用教程

    什么是 bricks-css ？ bricks-css 是一个轻量级的 CSS 框架，它提供了一组易于使用和高度可定制化的 CSS 类和样式，方便开发人员快速构建和设计网站和应用程序。

    4 年前
  • npm 包 bricks-framework 使用教程

    前言 在前端开发过程中，我们经常需要使用许多第三方库来提高工作效率和代码复用率。而在这些第三方库中，npm 包已经成为了前端开发的必备工具之一。本文将介绍一款常用的 npm 包 – bricks-fr...

    4 年前
  • npm 包 Bricks-Rewrite 使用教程

    在前端开发中，我们经常会用到 URL 重写，例如在 SPA(Single Page Application) 中使用 hash url 策略，或者使用路径 url 策略。

    4 年前
  • npm 包 bricks-ui 使用教程

    在前端开发中，很多时候我们需要使用一些成熟的 UI 库来快速搭建页面。在这个领域，bricks-ui 是一个值得尝试的 npm 包。它提供了一套基于 React 的组件库，可以帮助我们快速构建各种页面...

    4 年前
  • npm 包 brickset 使用教程

    前言 NPM 是 Node.js 的包管理工具，我们可以在 NPM 中搜索到许多优秀的包。其中，brickset 是一个非常实用的包，可用于创建 web 应用中的分析/监视工具和数据挖掘工具。

    4 年前
  • npm 包 brickworker 使用教程

    什么是 brickworker brickworker 是一个前端构建工具，它能够轻松地帮助前端工程师进行项目构建、打包等操作，并且功能强大、易于扩展。 安装 brickworker 在开始使用 br...

    4 年前

相关推荐

    暂无文章