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的更多相关文章

  1. eclipse重构详解(转)

    重构是对软件内部结构的一种调整,目的是在不改变软件行为的前提下,提高其可理解性,降低其修改成本.开发人员可以使用一系列重构准则,在不改变软件行为的前提下,调整软件的结构. 有很多种原因,开发人员应该重 ...

  2. Yeoman的好基友：Grunt

    grunt介绍 前端不能承受之痛 1.这是我们的生活 文件压缩:YUI Compressor.Google Closure 文件合并:fiddler + qzmin 文件校验:jshint 雪碧图:c ...

  3. 题解 P5065 【[Ynoi2014]不归之人与望眼欲穿的人们】

    出现了一篇跑得炒鸡慢的题解! noteskey 无 fuck 说,好像就是整个数列分块然后合并区间...什么的吧 对于每块内部就是算一下前缀信息.后缀信息(就是以 第一个点/最后一个点 为一个边界,不 ...

  4. grunt-inline：一个资源内嵌插件

    一.插件简介 将引用的外部资源,如js.css.img等,内嵌到引用它们的文件里去. 二.使用场景 在项目中,出于某些原因,有的时候我们需要将一些资源,比如js脚本内嵌到页面中去.比如我们的html页 ...

  5. kd-tree 小结

    核心思想 是一种分割 \(k\) 维数据空间的数据结构 一维情况下就是平衡树,以 \(key\) 为标准判断插入左儿子还是右儿子 \(kdtree\) 就是平衡树在多维空间的扩展 因为有多维,我们按不 ...

  6. 『重构--改善既有代码的设计』读书笔记----Inline Class

    如果某个类没有做太多的事情,你可以将这个类的所有特性搬移到另外一个类中,然后删除原类.可以看到,Inline Class正好和Extract Class相反,后者是将一个巨类分解成多个小类从而来分担责 ...

  7. 重构改善既有代码设计--重构手法13：Inline Class （将类内联化）

    某个类没有做太多事情.将这个类的所有特性搬移到另一个类中,然后移除原类. 动机:Inline Class (将类内联化)正好于Extract Class (提炼类)相反.如果一个类不再承担足够责任.不 ...

  8. 重构改善既有代码设计--重构手法02：Inline Method （内联函数）& 03： Inline Temp(内联临时变量)

    Inline Method (内联函数) 一个函数调用的本体与名称同样清楚易懂.在函数调用点插入函数体,然后移除该函数. int GetRating() { return MoreThanfiveLa ...

  9. VS插件CodeRush for Visual Studio发布v19.1.5|新的Inline Lambda重构

    CodeRush是一个强大的Visual Studio .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume- ...

随机推荐

  1. Java修改服务器（tomcat）响应头 Server:Apache-Coyote/1.1

    Server:Apache-Coyote/1.1 :很多人有说有漏洞,是否有没研究过, 只知道Apache-Coyote是tomcat处理socket链接信息,包装request.response等底 ...

  2. 关联与下钻：快速定位MySQL性能瓶颈的制胜手段

    本文根据DBAplus社群[2018年1月6日北京开源与架构技术沙龙]现场演讲内容整理而成. 讲师介绍 李季鹏 新炬网络数据库专家 专注于MySQL数据库性能管理及相关解决方案,目前主要从事MySQL ...

  3. 俄罗斯方块（JS+CSS）

    这是一个用 js + css 写的网页版俄罗斯方块. 具体代码与示例可访问我的另一个博客查看,源码与示例.

  4. Vue以CDN方式调用Swiper轮播异常

    问题概览: 有一个小型单页应用项目,嫌用组件式调用vue-swiper麻烦,因此以CDN的方式调用swiper,结果轮播的图不动了! 爬了半天百度和谷歌都无解决方案,最后曲线救国的方式解决了问题. 解 ...

  5. [WPF]启动参数

    在App.xaml.cs中重写方法OnStartup protected override void OnStartup(StartupEventArgs e) { //e.Args为命令行参数 // ...

  6. [2018HN省队集训D9T1] circle

    [2018HN省队集训D9T1] circle 题意 给定一个 \(n\) 个点的竞赛图并在其中钦定了 \(k\) 个点, 数据保证删去钦定的 \(k\) 个点后这个图没有环. 问在不删去钦定的这 \ ...

  7. 2.Dubbo2.5.3注册中心和监控中心部署

    转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.注册中心Zookeeper安装 (1)搭建要求 zk服务器集群规模不小于3个节点要求各服务器之间系统时间要 ...

  8. OpenCV——重映射、仿射变换

    #include <opencv2/opencv.hpp> #include <iostream> #include <math.h> using namespac ...

  9. JS实现 类似图片3D效果

    其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已,代码很乱,所以现在有业余时间研究了下,其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路.效果如下: 可 ...

  10. office2016word 每次打开都有进度条问题 解决方式

      最佳答案   每次打开Office 2016都提示配置进度(包括Word.PPT.Excel等等Office产品都有这种现象),如图,先是显示“安装程序正在准备必要的文件”,接着显示“正在配置Mi ...