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

写在后面

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


相关文章
|
9月前
|
数据采集 前端开发 JavaScript
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
这篇文章介绍了作者在学习React和Nest时受到大佬imsyy项目DailyHot的启发,基于React开发了一个项目,并因为这个项目获得了少量流量而进行了优化。作者随后因为想要优化SEO和深入学习Next.js14,决定重构这个项目。文章详细介绍了项目的信息、特性、演示图、运行环境、Vercel本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目,并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。
104 2
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
|
5月前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
132 6
|
8月前
|
JavaScript 前端开发 Java
JS经常碰见的报错问题
JS经常碰见的报错问题
|
7月前
|
JavaScript 前端开发
autox.js中if和while的用法区别和差异
autox.js中if和while的用法区别和差异
|
存储 SQL JSON
使用 NextJS 和 TailwindCSS 重构我的博客
这是笔者第三次重构博客应用。本文主要是笔者记录重构博客所用的知识和记录,希望以后每周或者每两周能够有一篇文章,记录和总结知识。
1229 0
|
JavaScript 索引
温故而知新《9种js数组去重方法》
温故而知新《9种js数组去重方法》
100 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理1
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理1
68 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理2
前端学习笔记202305学习笔记第二十三天-main.js重构和报错处理2
54 0
|
JavaScript
JS 实现各种排序 #16
JS 实现各种排序 #16
86 0
|
存储 JavaScript 前端开发
重温js——js语法基础
在变量声明这里,大家肯定还记得。所有的js 在使用的时候需要进行声明。也就是在内存地址中开辟一个空间。然后等待数据的"入住"
重温js——js语法基础

热门文章

最新文章