grunt 怎样合并 html
2个回答
展开全部
简单的做法就是把你的 header 和 footer 抽出来，在 html 中通过占位符的方式引入，然后自己写个自定义的 task 去插入。
例如，header.html 的路径是：/common/header.html，你的其中一个页面可能这样引入 header 文件：
<!DOCTYPE html>
<html>
<head>
<title>A</title>
</head>
<body>
<include src="/common/header.html"/>
</body>
</html>
然后自己写一个 grunt task 来打包 html 文件，把 html 文件中的 <include xxx/> 替换成对应的文件内容， 下面是伪代码：
grunt.registerTask('htmlpack', function(){
var dir = xxxx; //源文件的路径
var destDir = xxxx; //要保存的路径
// 读取源文件
fs.readDir(dir, function(filename){
var file = fs.readFile(filename);
var include = file.match(/\<include.+?\/\>/);
// 替换内容
include.forEach(function (item) {
var src = item.replace('<include src=""', '').replace('"/>', '');
var html = fs.readFile(src);
file.replace(item, html);
})；
// 输出文件
fs.writeFile(destDir+filename, file);
})
})
例如，header.html 的路径是：/common/header.html，你的其中一个页面可能这样引入 header 文件：
<!DOCTYPE html>
<html>
<head>
<title>A</title>
</head>
<body>
<include src="/common/header.html"/>
</body>
</html>
然后自己写一个 grunt task 来打包 html 文件，把 html 文件中的 <include xxx/> 替换成对应的文件内容， 下面是伪代码：
grunt.registerTask('htmlpack', function(){
var dir = xxxx; //源文件的路径
var destDir = xxxx; //要保存的路径
// 读取源文件
fs.readDir(dir, function(filename){
var file = fs.readFile(filename);
var include = file.match(/\<include.+?\/\>/);
// 替换内容
include.forEach(function (item) {
var src = item.replace('<include src=""', '').replace('"/>', '');
var html = fs.readFile(src);
file.replace(item, html);
})；
// 输出文件
fs.writeFile(destDir+filename, file);
})
})
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Grunt基于Node.js其npmNode.js包管理器GruntGrunt插件通npm安装并管理Grunt0.4.x必须配合Node.js>=0.8.0版本使用安装Node.js：Node.js官网点击INSTALL载并安装现Node.js自安装npm安装完打命令行进行续操作（始->输入CMD或始->所程序->命令提示符）进入Node.js安装目录（默认路径"C:\ProgramFiles\nodejs"）：cd\pro*\nod*通2命令查看node.jsnpm版本号：node-vnpm-v安装Grunt：前安装0.3版本请先卸载：npmuninstall-ggrunt安装Grunt命令行（CLI）：npminstall-ggrunt-cli注1：-g代表全局安装Grunt二版本：服务器端版本（grunt）客户端版本（grunt-cli）注2：安装grunt-cli并等于安装gruntgruntCLI任务简单：调用与Gruntfile同目录grunt带处允许同系统同安装版本gruntgrunt使用模块结构除安装命令行界面外要根据需要安装相应模块些模块应该采用局部安装同项目能需要同模块同版本述命令执行完grunt命令加入系统路径任何目录执行命令创建新Grunt项目：假设项目安装D盘根目录我首先进度D盘：d:创建项目文件夹：mkdirtestProject进入文件夹：cdtestProject接着项目文件夹根目录添加两文件：package.jsonGruntfilepackage.json:文件npm用于存储项目元数据便项目发布npm模块Gruntfile:文件命名Gruntfile.js或Gruntfile.coffee用配置或定义任务（task）并加载Grunt插件创建package.json文件：package.json应放置于项目根目录与Gruntfile同目录并且应该与项目源代码起提交部grunt-init模版都自创建特定于项目package.json文件：执行npminit命令（根据默认grunt-init模板引导创建基本package.json文件）：npminit根据提示填写信息（都允空）：name:(GruntT) //模块名称：能包含写字母数字划线空则使用项目文件夹名称代替version:(0.0.0) //版本号description: //描述：npm搜索列表显示entrypoint:(index.js) //模块入口文件testcommand: //测试脚本gitrepository: //git仓库址keywords: //关键字：用于npm搜索关键字用空格author: //作者license:(BSD-2-Clause) //原协议二：手创建package.json文件添加项目/模块描述信息：{ "name":"my-project", "version":"0.1.0"}附：package.json官文档较完整package.json文件安装GruntGrunt插件：：手添加修改package.json文件：{ "name":"my-project", "version":"0.1.0", "devDependencies":{ "grunt":"~0.4.1", "grunt-contrib-cssmin":"~0.7.0" }}注：devDependencies面参数指定项目依赖GruntGrunt插件版本其"~0.7.0"代表安装该插件某特定版本需安装新版本改"*"执行：npminstall发现项目文件夹node_modules文件夹其面应GruntGrunt插件二：自安装：通npminstall--save-dev命令安装新版Grunt：npminstallgrunt--save-dev接着安装我所需要插件：npminstallgrunt-contrib-cssmin--save-dev注：其--save-dev表示作项目依赖添加package.json文件devDependencies内要安装指定版本Grunt或者Grunt插件需要运行npminstallgrunt@VERSION--save-dev命令其VERSION所需要版本(指定版本号即)附：Grunt官插件列表其带星号官维护插件创建Gruntfile.js文件：module.exports=function(grunt){//配置任务参数grunt.initConfig({pkg:grunt.file.readJSON('package.json'),cssmin:{combine:{files:{'css/release/compress.css':['css/*.css']//指定合并CSS文件['css/base.css','css/global.css']}},minify:{options:{keepSpecialComments:0,/*删除所注释*/banner:'/*minifiedcssfile*/'},files:{'css/release/master.min.css':['css/master.css']}}}});//插件加载（加载"cssmin"模块）grunt.loadNpmTasks('grunt-contrib-cssmin');//自定义任务：通定义default任务让Grunt默认执行或任务grunt.registerTask('default',['cssmin']);};执行配置所任务：grunt执行某特定任务：gruntcssmin测试：接着我项目文件夹创建文件夹命名：CSS并且面创建base.cssmaster.css2CSS文件随便写点内容面命令行执行grunt看提示说明执行功：Running"cssmin:combine"(cssmin)taskFilecss/release/compress.csscreated.Running"cssmin:minify"(cssmin)taskFilecss/release/master.min.csscreated.Done,withouterrors.参考文档：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
