巧用cheerio重构grunt-inline
重构 巧用 inline grunt
2023-09-11 14:14:35 时间
grunt-inline是楼主之前写的一个插件,主要作用是把页面带了__inline
标记的资源内嵌到html页面去。比如下面的这个script标签。
<script src="main.js?__inline"></script>
技术难度不高,主要就是通过正则将符合条件的script标签等匹配出来。当时就在想:
如果有那么一个插件,能够帮我们完成html解析就好了!
没错,真有——cheerio
。感谢当劳君的推荐 =。=
cheerio简介
直接引用某前端同学的翻译。
为服务器特别定制的,快速、灵活、实施精益(lean implementation)的jQuery核心
举个最简单的栗子,更多API说明请参考官方文档
var cheerio = require('cheerio'),
$ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();
//=> <h2 class="title welcome">Hello there!</h2>
重构实战
首先看下我们的目录结构。其中,src
里的是源文件,dest
目录里是编译生成的文件。可以猛击这里下载demo。
├── demo.js
├── package.json
├── dest
│ └── index.html
└── src
├── index.html
└── main.js
我们看下src/index.html
,里面的main.js
就是我们最终要内嵌的目标。let's go
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>cheerio demo</title>
</head>
<body>
<h1>cheerio demo</h1>
<script src="main.js?__inline"></script>
</body>
</html>
先看成果
在控制台敲如下命令,就会生成dest/index.html
。下一节我们会讲下demo.js的实现
npm install
node demo.js
dest/index.html如下。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>cheerio demo</title>
</head>
<body>
<h1>cheerio demo</h1>
<script>/**
* Created by a on 14-7-15.
*/
var Main = {
say: function(msg){
console.log(msg);
}
};</script>
</body>
</html>
demo.js代码解析
直接上demo.js
的代码,一切尽在不言中。如果想更近一步,完成css资源、img资源的内嵌,非常简单,参照script内嵌的那部分代码就可以了。需要压缩代码?赶紧用uglifyjs
啦,so easy,这里就不占用篇幅讲这个了。
/**
* Created by a on 14-7-15.
*/
var cheerio = require('cheerio'), // 主角 cheerio
fs = require('fs'),
url = require('url'),
path = require('path');
var from = 'src/index.html', // 源文件
to = 'dest/index.html', // 最终生成的文件
content = fs.readFileSync(from),
$ = cheerio.load(content), // 加载源文件
fd = 0;
// 选取 src/index.html 里所有的script标签,并将带有 __inline 标记的内嵌
$('script').each(function(index, script){
var script = $(this),
src = script.attr('src'),
urlObj = url.parse(src),
dir = path.dirname(from),
pathname = path.resolve(dir, urlObj.pathname),
scriptContent = '';
// 关键步骤:__inline 检测!(ps:非严谨写法)
if(urlObj.search.indexOf('__inline')!=-1){
scriptContent = fs.readFileSync(pathname);
script.replaceWith('<script>'+ scriptContent +'</script>');
}
});
// 创建dest目录
if(!fs.exists(path.dirname(to))){
fs.mkdirSync(path.dirname(to));
}
// 将处理完的文件写回去
fd = fs.openSync(to, 'w');
fs.writeFileSync(to, $.html());
fs.closeSync(fd);
写在后面
没什么好写的其实,求勘误~
相关文章
- Hi,我们的代码重构了
- 【前端模板之路】一、重构的兄弟说:我才不想看你的代码!把HTML给我交出来!
- 第二章App框架设计与重构
- 浅谈压缩感知(二十八):压缩感知重构算法之广义正交匹配追踪(gOMP)
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- 浅谈压缩感知(二十一):压缩感知重构算法之正交匹配追踪(OMP)
- 【问题解决方案】git仓库重构
- Open3D Poisson曲面重构
- 新手学编程:代码重构入门-进阶
- 改进二进制粒子群算法在配电网重构中的应用(Matlab实现)【论文复现】
- 机房重构总结