使用Grunt-contrib-connect为html动态添加script标签

在WEB开发的前后端分离过程中,你可能会遇到这样的场景:在开发过程中需要引入一个额外的script标签外链一段javascript,而在开发完毕与后端联调时,这个script会不再需要了。你可以通过手动的方式,一次又一次的注释与反注释这个script标签,虽然是很简单的动作,但却很可能带给你不必要的麻烦,从而给你”环躁“的心情。通过这篇文章分享一下,如何在这种场景下解放你的双手。

这里有个前提:只有以静态方式开发的WEB页面,才可以使用本方法。换言之,如果你的开发必须基于正式环境的服务器比如tomcat,jboss,Apache等,那就无法使用此方法。原因是,grunt-contrib-connect是一个启动本地http服务的grunt插件(是不是插件不重要,重要的是,它会启动一个http服务),然后通过这个http服务访问你的静态页面。
其实这篇文章和上一篇 使用NodeJS模拟数据 有一定的关系,那一篇讲的是如何通过NodeJS造假数据,而这一篇就是讲如何通过NodeJS平台的开发工具Grunt-contrib-connect动态添加script标签,以引入之前造的假数据。我之所以有这个想法,一方面是来自场景需求,一方面灵感来自于livereload的实现原理,它也是动态为html添加websocket的处理脚本。

实现原理是这样的,grunt-contrib-connect工具提供了中间件功能,我们可以拦截客户端请求url,假如请求url是你希望动态添加script的页面(html),那么就可以对该html作进一步的处理再返回给客户端,本质上就是字符串的处理,所以你不仅可以动态添加script标签,你可以任意的更改返回给客户端的html内容,而磁盘上对应的html内容并没有改变。说起这个,想起网络供应商会给网页添加烦人的广告,也是这个原理。

我把demo代码提交到github了 https://github.com/stoneChen/dynamic-script

关键代码就是中间件的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
middleware: function (connect, options, middlewares) {
return [
function (req, res, next) {
if(req.originalUrl !== '/test.html'){//指定需要动态处理的url,否则执行下一个中间件
return next();
}
var indexHTML = grunt.file.read('test/test.html');//找到相应的html文件,这里硬编码指定
var scriptTags = '<script src="/dynamic.js"></script>';//待插入的script标签
var injectedHTML = indexHTML.replace(/<\/body>/, function(w) {//找到body尾标签,插入上面的标签
return scriptTags + w ;
});
res.end(injectedHTML);//返回给客户端
},
connect.static('test')//把test目录作为一个web目录
]
}

注释部分已经比较明确的解释了关键步骤。

这个demo,其实很简单,到了具体的项目,很多地方需要做动态处理,比如,需要动态插入的js路径可以通过另外一个配置文件,由grunt require进来,甚至多个需要动态插入标签的页面列表等,这些灵活的扩展交给读者尽情发挥。

我们要学会做一个”懒人“,脏活累活都让程序去干吧~