巧用cheerio重构grunt-inline

简介:

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); 

写在后面

没什么好写的其实,求勘误~


相关文章
|
8月前
|
数据采集 前端开发 JavaScript
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
这篇文章介绍了作者在学习React和Nest时受到大佬imsyy项目DailyHot的启发,基于React开发了一个项目,并因为这个项目获得了少量流量而进行了优化。作者随后因为想要优化SEO和深入学习Next.js14,决定重构这个项目。文章详细介绍了项目的信息、特性、演示图、运行环境、Vercel本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目,并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
|
4月前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
120 6
|
2月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
JavaScript
js基础笔记学习97-立即执行函数2
js基础笔记学习97-立即执行函数2
47 0
js基础笔记学习97-立即执行函数2
|
JavaScript
js基础笔记学习96-立即执行函数1
js基础笔记学习96-立即执行函数1
84 0
js基础笔记学习96-立即执行函数1
lodash函数学习6
lodash函数学习6
114 0
lodash函数学习6
lodash函数学习7
lodash函数学习7
96 0
lodash函数学习7
lodash函数学习4
lodash函数学习4
105 0
lodash函数学习4
lodash函数学习1
lodash函数学习
109 0
lodash函数学习1
lodash函数学习2
lodash函数学习2
100 0
lodash函数学习2