简介
bootstrap4-gulp-nunjucks 是一个前端的 npm 包，可以帮助我们快速搭建使用 Bootstrap 4 的 Web 应用程序。本文将详细介绍这个 npm 包的使用方法。
安装
安装 bootstrap4-gulp-nunjucks 只需在终端输入以下命令：
npm install bootstrap4-gulp-nunjucks
另外，你也需要先安装 Node.js 和 npm。
使用
安装完成之后，在你的项目根目录中创建一个名为 gulpfile.js 的文件，在其中输入以下代码：
var gulp = require('gulp');
var bgn = require('bootstrap4-gulp-nunjucks');
gulp.task('default', bgn.buildTask);接下来，在终端中输入以下命令：
gulp
这样，bootstrap4-gulp-nunjucks 就会为你构建一个包含 Bootstrap 4 的 Web 应用程序。
模板
在 bootstrap4-gulp-nunjucks 中，我们可以使用 Nunjucks 模板引擎，来快速构建出页面。
首先，在 src 目录下新建一个 templates 目录，然后在其中新建一个名为 base.html 的文档，输入以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ----- ----- ---- -------- ----------
----- ---------------- -------- ---- ---------------- ----------------
-- ----- --- ---- -------- --
------- ------- ---- ------------------------
-- ----- -- ---- -------- --
-------
------
-- ----- ------- ---- -------- --
-------
-------该模板定义了一个基础的 HTML 模板，然后我们可以在其他模板中继承它，从而快速构建出 Web 界面。
例如，我们在 templates 目录下新建一个名为 index.html 的文档，输入以下代码：
{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block content %}
<h1>欢迎来到我的主页</h1>
{% endblock %}在这个模板中，我们使用 extends 语句来继承基础模板，然后再定义了一个 content 区域，其中包含了一个 H1 标题。
样式
在 bootstrap4-gulp-nunjucks 中，我们也可以很容易地自定义样式，只需在 src/scss 目录下新建一个名为 main.scss 的文档。
例如，我们在 main.scss 中增加了以下代码：
.card-footer {
background-color: #eee;
}该样式会将卡片的底部区域背景色改为浅灰色。
脚本
在 bootstrap4-gulp-nunjucks 中，我们可以在 src/js 目录下编写 JavaScript 脚本。这些脚本会在构建时自动打包进入最终代码中。
例如，我们在 src/js 目录下新建一个名为 main.js 的文档，输入以下代码：
console.log('Hello World');这样，当我们访问页面时，就会在浏览器的控制台中看到 Hello World 这条信息。
结论
通过本文，我们了解了 npm 包 bootstrap4-gulp-nunjucks 的使用方法，以及如何使用 Nunjucks 模板引擎、自定义样式和编写 JavaScript 脚本。希望本文能对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4df9