grunt中ejs-static配置

最新推荐文章于 2021-06-16 18:18:37 发布

jyy_12

最新推荐文章于 2021-06-16 18:18:37 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： node

本文链接：https://blog.youkuaiyun.com/jyy_12/article/details/19628181

node 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Grunt插件ejs-static来编译EJS模板生成静态HTML页面，并通过配置数据文件和路由JSON来实现动态内容的加载。包括配置方法一与方法二，以及如何在EJS模板中引用JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ejs-static github地址： https://github.com/shaekuronen/grunt-ejs-static

Gruntfile.js中添加ejs-static：

ejs_static: require('./tasks/ejs_static')(grunt)

配置方法一：

ejs_static.js

module.exports=function(grunt){
  var config={
    dest: 'app/html',
    path_to_data: 'data/data.json',
    path_to_layouts: 'app/assets/html/',
    index_page: 'index',
    parent_dirs: false,
    underscores_to_dashes: true,
    file_extension: '.html'
  }
	return {
		preview: {
			options: config
		},
    release:{
			options: grunt.util._.merge({ }, config, {
          dest:'<%= yeoman.dist %>/html'
        })  
    }
	}	
}

data.json

{
  "index": {
    "meta": {
      "title": "Home",
      "description": "Compile static html from ejs templates",
      "keywords": "gruntplugin, ejs, static html, static site generator, templates, templating engine, template, embedded js"
    }
  },

  "about": {
    "path_to_layout": "app/assets/html/about.ejs",
    "meta": {
      "title": "About",
      "description": "Compile static html from ejs templates",
      "keywords": "gruntplugin, ejs, static html, static site generator, templates, templating engine, template, embedded js"
    }
  }
}

ejs模板页中引用方法(对应各文件名的meta)：<%= meta.title %>

配置方法二：

ejs_static.js

module.exports=function(grunt){
  var config={
    dest: 'app/html',
    path_to_data: 'data/routes.json',
    path_to_layouts: 'app/assets/html/',
    index_page: 'index',
    parent_dirs: false,
    underscores_to_dashes: true,
    file_extension: '.html'
  }
	return {
		preview: {
			options: config
		},
    release:{
			options: grunt.util._.merge({ }, config, {
          dest:'<%= yeoman.dist %>/html'
        })  
    }
	}	
}

routes.json

{
  "home": {
    "path_to_layout": "app/assets/html/index.ejs",
    "path_to_data": [
      "data/global.json",
      {"data/meta.json": "home"}
    ]
  },
  "a": {
    "path_to_layout": "app/assets/html/about.ejs",
    "path_to_data": [
      "data/global.json",
      "data/a.json"
    ]
  },
  "b": {
    "path_to_layout": "app/assets/html/about.ejs",
    "path_to_data": "data/a.json"
  }
}

meta.json

{
  "home": {
    "title": "Grunt EJS Static | Home",
    "description": "The demo page for Grunt EJS Static",
    "keywords": "gruntplugin, ejs, static html, static site generator, templates, templating engine, template, embedded js"
  }
}

global.json

{
  "site_name": "Grunt EJS Static",
  "google_analytics": "XOXOXO"
}

a.json

{
    "title": "About",
    "description": "Compile static html from ejs templates",
    "keywords": "gruntplugin, ejs, static html, static site generator, templates, templating engine, template, embedded js"
}

ejs模板页中引用：<%= global.site_name%> <%= meta.title%> <%= a.title %>
注意：global.site_name中的global对应的是该path_to_data载入的json文件名