在前端开发中，我们经常需要在后端渲染一些动态页面和模板。而gulp-consolidate-render就是提供了在gulp自动化工作流中整合各种渲染引擎的解决方案。该插件能够将gulp处理过的文件发送给各种模板引擎，执行模板渲染并生成最终的HTML文件。
安装
npm install gulp-consolidate-render
基本用法
使用gulp-concat-render需要在gulp的任务中引入该插件，并在插件中设置模板引擎相关的参数。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------------------
---------------------- ---------- -
------ -------------------------------- -- ---
------------------------- - -- ---------
----- ------ ------
---
------------------------- -- -----
---该示例任务将会从src/templates/中读取所有的 .html 文件，并通过jade模板引擎来渲染这些HTML文件。与此同时，gulp-consolidate-render还可以为模板引擎提供更多的参数来定制化渲染过程。
支持模板引擎
gulp-consolidate-render支持大多数JS模板引擎，包括jade, ejs, handlebars, lodash等常见引擎。
以下是几个常见模板引擎的用法示例：
使用jade模板引擎：
gulp.task('templates', function() {
return gulp.src('src/templates/*.jade')
.pipe(consolidate('jade', {
name: 'Hello World'
}))
.pipe(gulp.dest('dist'));
});使用ejs模板引擎：
gulp.task('templates', function() {
return gulp.src('src/templates/*.ejs')
.pipe(consolidate('ejs', {
name: 'Hello World'
}))
.pipe(gulp.dest('dist'));
});使用handlebars模板引擎：
gulp.task('templates', function() {
return gulp.src('src/templates/*.handlebars')
.pipe(consolidate('handlebars', {
name: 'Hello World'
}))
.pipe(gulp.dest('dist'));
});深度学习
gulp-consolidate-render能够使我们在使用gulp自动化工作流的同时，将页面的渲染与后端分离，提高了应用的扩展性和可维护性。此外，由于支持多种常见的JS模板引擎，可以在不同项目之间切换使用，便于协作开发。
指导意义
对于前端开发人员来说，掌握各种JS模板引擎的使用及整合，能够使我们更高效地完成页面的开发，同时也更加灵活地应对需求变化。而gulp-consolidate-render作为前后端渲染整合的解决方案，一定程度上提高了我们的开发效率和可维护性。
示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------------------
---------------------- ---------- -
------ --------------------------------
------------------------- -
----- ------ ------
---
-------------------------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822dc2