grunt-inline是楼主之前写的一个插件，主要作用是把页面带了__inline标记的资源内嵌到html页面去。比如下面的这个script标签。

  1. <script src="main.js?__inline"></script>

技术难度不高，主要就是通过正则将符合条件的script标签等匹配出来。当时就在想：

如果有那么一个插件，能够帮我们完成html解析就好了！

没错，真有——cheerio。感谢当劳君的推荐 ＝。＝

cheerio简介

直接引用某前端同学的翻译。

为服务器特别定制的，快速、灵活、实施精益(lean implementation)的jQuery核心

举个最简单的栗子，更多API说明请参考官方文档

  1. var cheerio = require('cheerio'),
  2.     $ = cheerio.load('<h2 class="title">Hello world</h2>');
  4. $('h2.title').text('Hello there!');
  5. $('h2').addClass('welcome');
  7. $.html();
  8. //=> <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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>cheerio demo</title>
  6. </head>
  7. <body>
  8.     <h1>cheerio demo</h1>
  9.     <script src="main.js?__inline"></script>
  10. </body>
  11. </html>

先看成果

在控制台敲如下命令，就会生成dest/index.html。下一节我们会讲下demo.js的实现

  1. npm install
  2. node demo.js

dest/index.html如下。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>cheerio demo</title>
  6. </head>
  7. <body>
  8.     <h1>cheerio demo</h1>
  9.     <script>/**
  10.  * Created by a on 14-7-15.
  11.  */
  12. var Main = {
  13.     say: function(msg){
  14.         console.log(msg);
  15.     }
  16. };</script>
  17. </body>
  18. </html>

demo.js代码解析

直接上demo.js的代码，一切尽在不言中。如果想更近一步，完成css资源、img资源的内嵌，非常简单，参照script内嵌的那部分代码就可以了。需要压缩代码？赶紧用uglifyjs啦，so easy，这里就不占用篇幅讲这个了。

  1. /**
  2.  * Created by a on 14-7-15.
  3.  */
  4. var cheerio = require('cheerio'),   // 主角 cheerio
  5.     fs = require('fs'),
  6.     url = require('url'),
  7.     path = require('path');
  9. var from = 'src/index.html',    // 源文件
  10.     to = 'dest/index.html', // 最终生成的文件
  11.     content = fs.readFileSync(from),
  12.     $ = cheerio.load(content),  // 加载源文件
  13.     fd = 0;
  15. // 选取 src/index.html 里所有的script标签，并将带有 __inline 标记的内嵌
  16. $('script').each(function(index, script){
  17.     var script = $(this),
  18.         src = script.attr('src'),
  19.         urlObj = url.parse(src),
  20.         dir = path.dirname(from),
  21.         pathname = path.resolve(dir, urlObj.pathname),
  22.         scriptContent = '';
  24.     // 关键步骤：__inline 检测！（ps：非严谨写法）
  25.     if(urlObj.search.indexOf('__inline')!=-1){
  26.         scriptContent = fs.readFileSync(pathname);
  27.         script.replaceWith('<script>'+ scriptContent +'</script>');
  28.     }
  29. });
  31. // 创建dest目录
  32. if(!fs.exists(path.dirname(to))){
  33.     fs.mkdirSync(path.dirname(to));
  34. }
  36. // 将处理完的文件写回去
  37. fd = fs.openSync(to, 'w');
  38. fs.writeFileSync(to, $.html());
  39. 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. ln -s 软连接介绍

    软连接(softlink)也称符号链接.linux里的软连接文件就类似于windows系统中的快捷方式.软连接文件实际上是一个特殊的文件,文件类型是I.软连接文件实际上可以理解为一个文本文件,这个文件 ...

  2. 【转】Java学习---Java Web基础面试题整理

    [原文]https://www.toutiao.com/i6592359948632457731/ 1.什么是Servlet? 可以从两个方面去看Servlet: a.API:有一个接口servlet ...

  3. Win7命令终端基础配色指南

    微软对控制台字体的元数据有严格的限制,https://support.microsoft.com/zh-cn/help/247815/necessary-criteria-for-fonts-to-b ...

  4. Rafy框架

    l  什么是Rafy框架? -------- Rafy 是一个面向企业级开发的插件化快速开发框架. l  Rafy的优点是什么? ------快速开发.产品线工程.一套代码可同时生成并运行 C/S.单 ...

  5. ffmpeg常用参数一览表

    基本选项: -formats 输出所有可用格式 -f fmt 指定格式(音频或视频格式) -i filename 指定输入文件名,在linux下当然也能指定:0.0(屏幕录制)或摄像头 -y 覆盖已有 ...

  6. BZOJ3173:[TJOI2013]最长上升子序列(Splay)

    Description 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.每插入一个数字,我们都想知道此时最长上升子序列长度是多少? Input 第一行一 ...

  7. Oracle 12C Data Gurad RAC TO RAC

    Oracle 12C RAC TO RAC Data Guard on RHEL7 0.环境说明   primary db physical standby 操作系统 rhel7 x86_64 rhe ...

  8. 友盟推送SDK集成测试、常见问题以及注意事项总结

    最近为了解决公司APP在一些手机出现的推送问题重新集成了最新版的友盟推送SDK,花费了几天时间终于把集成和测试工作完成,最终在华为,Nexus,三星,小米,HTC,魅族等10多部手机上测试并达到了预想 ...

  9. Nginx HTTPS功能部署实践

    本文出处:http://oldboy.blog.51cto.com/2561410/1889346 30.1 文档目的 本文目的提高自己文档的写作能力及排版能力,加强上课所讲的内容得以锻炼也方便自己以 ...

  10. Springmvc常见问题

    问题一:org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'userCont ...