什么是 gulp-swig
gulp 是一个基于流的前端自动化构建工具，可帮助开发人员简化前端开发流程。gulp-swig 是 gulp 的一个插件，它基于 swig 模板引擎，可以将 swig 语法转换为 HTML 页面。
swig 是一个 JavaScript 模板引擎，可用于前端和后端，具有简单的语法和强大的动态内容渲染功能。gulp-swig 则是将 swig 模板引擎集成到 gulp 工作流程中，使得我们能够更加快速地构建 HTML 页面。
安装 gulp-swig
要使用 gulp-swig，需要先在项目中安装 gulp 和 gulp-swig，可以使用以下命令：
npm install gulp gulp-swig --save-dev
使用 gulp-swig
在项目中使用 gulp-swig 可以帮助我们更快速地构建 HTML 页面，以下是一个基本的 gulp-swig 任务：
var gulp = require('gulp'); var swig = require('gulp-swig'); gulp.task('html', function () { return gulp.src('./src/templates/**/*.html') .pipe(swig()) .pipe(gulp.dest('./dist/')); });
在上面的示例中，我们首先引入 gulp 和 gulp-swig，然后创建一个名为 html 的 gulp 任务。这个任务读取 ./src/templates 目录下的所有模板文件，将 swig 语法编译为 HTML，然后将编译后的 HTML 文件保存到 ./dist 目录中。
除了基本的 gulp-swig 任务，还可以使用一些可选的参数来配置模板引擎的行为。以下是一些常用的参数及其作用：
data
data 参数用于向模板中传递数据，可以是一个对象或一个函数。例如：
var gulp = require('gulp'); var swig = require('gulp-swig'); gulp.task('html', function () { return gulp.src('./src/templates/**/*.html') .pipe(swig({ data: { title: 'gulp-swig usage' } })) .pipe(gulp.dest('./dist/')); });
在上面的示例中，我们向模板中传递了一个 title 变量，可以在模板中通过 {{ title }} 获取这个值。
defaultContext
defaultContext 参数用于设置默认的数据上下文对象，可以是一个对象或一个函数。例如：
var gulp = require('gulp'); var swig = require('gulp-swig'); gulp.task('html', function () { return gulp.src('./src/templates/**/*.html') .pipe(swig({ defaultContext: { suffix: '.html' } })) .pipe(gulp.dest('./dist/')); });
在上面的示例中，我们设置了默认的数据上下文对象，可以在模板中直接使用 {{ suffix }} 获取这个值。
filters
filters 参数用于设置模板的过滤器，可以是一个对象或一个函数。例如：
-- -------------------- ---- ------- --- ---- - ---------------- --- ---- - --------------------- ----------------- -------- -- - ------ ------------------------------------- ------------ -------- - ---- -------- ------- - ------ ---------------------------------------------------------------- - - --- ---------------------------- ---展开代码
在上面的示例中，我们向模板中添加了一个 md5 过滤器，可以在模板中通过 {{ variable|md5 }} 使用这个过滤器。
gulp-swig 示例
以下是一个使用 gulp-swig 构建静态网站的示例。
我们已经在项目中安装了 gulp 和 gulp-swig，还需要安装以下插件：
npm install gulp-sass gulp-autoprefixer browser-sync --save-dev
gulp-sass 是一个将 SCSS 编译为 CSS 的插件，gulp-autoprefixer 是一个自动添加 CSS 前缀的插件，browser-sync 是一个浏览器自动刷新插件。
以下是一个完整的 gulpfile.js 文件：
-- -------------------- ---- ------- --- ---- - ---------------- -- ---- --- ---- - --------------------- --- ---- - --------------------- --- ------------ - ----------------------------- --- ----------- - --------------------------------- -- -- ---- -- ------------------- ---------- - ------ ------------------------------ ------------- --------------------- ---------------------------- ---------------------------- --- -- -- ---- -- ----------------- -------- -- - ------ ------------------------------------- ------------ ----- - ------ ---------- -------- -- --------- - ------ ----- - --- --------------------------- ---------------------------- --- -- ------- ------------------ ---------- - ------------------ ------- - -------- -------- - --- -------------------------------- ----------------------- ------------------------------------- --------------------- --- -- ---- -------------------- ----------------------- ------- ----------展开代码
在上面的示例中，我们首先引入 gul-plug-ins。然后定义了两个任务：styles 和 html。styles 任务用于编译 SCSS 文件并自动添加 CSS 前缀，html 任务用于构建 HTML 文件并向模板中传递 title 变量。
最后，我们使用 gulp.series() 和 gulp.parallel() 方法来定义默认任务和启动本地服务器任务。默认任务需要同时执行 styles、html 和 serve 任务，也就是开发环境的构建和调试。启动本地服务器任务则用于开启浏览器自动刷新功能，实现实时预览。
总结
gulp-swig 是一个非常实用的工具，它能够快速地将 swig 模板编译为 HTML 页面，同时还支持多种配置参数，帮助我们更好地构建代码。希望本文可以帮助读者快速了解 gulp-swig 的使用方法，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71711
