巧用 cheerio 重构 grunt-inline

发布于 2021-08-06 22:13:06 字数 3153 浏览 1215 评论 0

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

分享到QQ

分享到微博