巧用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);
写在后面
没什么好写的其实，求勘误～
巧用cheerio重构grunt-inline的更多相关文章
- eclipse重构详解(转)
重构是对软件内部结构的一种调整,目的是在不改变软件行为的前提下,提高其可理解性,降低其修改成本.开发人员可以使用一系列重构准则,在不改变软件行为的前提下,调整软件的结构. 有很多种原因,开发人员应该重 ...
- Yeoman的好基友：Grunt
grunt介绍 前端不能承受之痛 1.这是我们的生活 文件压缩:YUI Compressor.Google Closure 文件合并:fiddler + qzmin 文件校验:jshint 雪碧图:c ...
- 题解 P5065 【[Ynoi2014]不归之人与望眼欲穿的人们】
出现了一篇跑得炒鸡慢的题解! noteskey 无 fuck 说,好像就是整个数列分块然后合并区间...什么的吧 对于每块内部就是算一下前缀信息.后缀信息(就是以 第一个点/最后一个点 为一个边界,不 ...
- grunt-inline：一个资源内嵌插件
一.插件简介 将引用的外部资源,如js.css.img等,内嵌到引用它们的文件里去. 二.使用场景 在项目中,出于某些原因,有的时候我们需要将一些资源,比如js脚本内嵌到页面中去.比如我们的html页 ...
- kd-tree 小结
核心思想 是一种分割 \(k\) 维数据空间的数据结构 一维情况下就是平衡树,以 \(key\) 为标准判断插入左儿子还是右儿子 \(kdtree\) 就是平衡树在多维空间的扩展 因为有多维,我们按不 ...
- 『重构--改善既有代码的设计』读书笔记----Inline Class
如果某个类没有做太多的事情,你可以将这个类的所有特性搬移到另外一个类中,然后删除原类.可以看到,Inline Class正好和Extract Class相反,后者是将一个巨类分解成多个小类从而来分担责 ...
- 重构改善既有代码设计--重构手法13：Inline Class （将类内联化）
某个类没有做太多事情.将这个类的所有特性搬移到另一个类中,然后移除原类. 动机:Inline Class (将类内联化)正好于Extract Class (提炼类)相反.如果一个类不再承担足够责任.不 ...
- 重构改善既有代码设计--重构手法02：Inline Method （内联函数）& 03： Inline Temp(内联临时变量)
Inline Method (内联函数) 一个函数调用的本体与名称同样清楚易懂.在函数调用点插入函数体,然后移除该函数. int GetRating() { return MoreThanfiveLa ...
- VS插件CodeRush for Visual Studio发布v19.1.5|新的Inline Lambda重构
CodeRush是一个强大的Visual Studio .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume- ...
随机推荐
- 解决Hsqldb指针只能单向移动，不能回滚问题（.first()）
Class.forName("org.hsqldb.jdbcDriver").newInstance(); Connection con = java.sql.DriverMana ...
- Java语言的主要特点
Java语言有很多的优点,可靠.安全.编译和解释型语言.分布式.多线程.完全面向对象.与平台无关性等等. 与平台无关性 Java语言最大的优势在于与平台无关性,也就是可以跨平台使用. 绝大多数的编程语 ...
- MFC 常用功能总结
目录 ◆ 获取启动参数◆ 调整窗体大小◆ 关闭Dialog窗体◆ Dialog启动时指定控件为焦点◆ Dialog中禁止ESC回车关闭窗体◆ 回车后焦点自动跳到下一个控件◆ 窗体中某个控件捕获右键菜单 ...
- windows中VirtualBox调整扩大VMDK格式的磁盘空间
今日为了学习(zhuangX),在家中电脑上安装了VirtualBox的虚拟机,为了兼容性,选择了VMDK磁盘格式,想起办公室的电脑,在系统配置完成后,一直提示磁盘空间不足,尴尬了,重新装?环境啥的都 ...
- LVM卷的创建及案例演示
LVM:Logical Volume Manager, Version:2dm: device mapper,将一个或多个底层块设备组织成一个逻辑设备的模块. /dev/dm-# 这里的#表示数字,代 ...
- EXI6.0的安装（找不到网卡、找不到磁盘）
给一台华为2488 V5 服务器安装EXI6.0服务 (问过华为售后不支持EXI5.5的安装,建议EXI6.0及以上版本) 根据界面提示信息按“Del”.进入BIOS设置界面 参考博客地址:https ...
- mysql 错误2203 1061 及安装最后出现2003现象的解决办法
错误描述 : 1.#2003-服务器没有响应MySQL无法启动 2.Can''t connect to MySQL server on ''localhost'' (10061) 3.ERROR 20 ...
- kudu基础入门
1.kudu介绍 1.1 背景介绍 在KUDU之前,大数据主要以两种方式存储: (1)静态数据: 以 HDFS 引擎作为存储引擎,适用于高吞吐量的离线大数据分析场景.这类存储的局限性是数据无法进行随机 ...
- 实现统计 android手机 CPU使用率
# -*- coding:utf-8 -*- ''' Created on Sep 10, 2018 @author: SaShuangYiBing ''' import subprocess imp ...
- Spring IOC 之 SmartInitializingSingleton
使用 实现该接口后,当所有单例 bean 都初始化完成以后, 容器会回调该接口的方法 afterSingletonsInstantiated. 主要应用场合就是在所有单例 bean 创建完成之后,可以 ...