时钟案例
步骤2:
步骤三:自定义resolveCSS方法
注意:css
匹配style
标签.exec()
匹配css
样式
步骤4:自定义resolveJS方法
步骤5:自定义resolveHYML方法来处理html代码(不包含css样式和js脚本)
注意:newHTML就是处理完的(只包含结构,不包含样式和脚本)
注意:最后被修改的html文件中的css和js都会以外链的形式引入
注意:思路整理
用fs
变量来读写文件
用path
变量来处理路径
regStyle
来匹配style标签
regScript
来匹配script标签
读取 素材 目录下的index.html
文件,读取成功后,用对应的三个方法(resolveCSS,resolveJS,resolveHTMl)来分别拆解出css,js,html
三个文件
reovleCSS中通过正则的exec
方法来提取css
代码,然后把style
标签通过replace
方法去除(替换成空),然后把代码写入index.css
文件中
reovleJS中通过正则的exec
方法来提取js
代码,然后把script
标签通过replace
方法去除(替换成空),然后把代码写入index.js
文件中
resolveHTML通过replace
方法,把css
的代码和js
代码替换成对应的link
外链,最后写入index.html
文件中
完整代码:
注意:时钟案例中的两个注意点
注意:没有对应路径(文件夹),在其中执行文件会报错
注意:同一文件重复
使用fs.writeFile
方法,旧内容会被覆盖