持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
前言
有些时候自己的合作伙伴经常把script跟css代码写在一起，导致我们看着很难受，这个文章将会教你如何制作一个可以直接将css与js分离的js脚本
1.安装node
LTS与Current版本的区别
- LTS为长期稳定的版本
- current为新特性尝鲜版本
2.导入path与fs模块
导入fs文件
注意:
- 可以创建文件，但不可以创建目录
- 再次调用写入新内容会覆盖旧内容
const fs=require('fs')
const path =require('path')
3.使用正则选出适当的标签内容
- 此正则表示为搜索style标签以及标签之内的所有内容
const regStyle = /<style>[\s\S]*<\/style>/
const regscript = /<script>[\s\S]*<\/script>/
4.使用fs模块读取html文件
使用fs.readFile()方法可以读取指定文件中的内容
fs.readFile(path.join(__dirname, './index.html'), 'utf8', function(err, datastr) {
if (err) return console.log('读取HTML文件失败!' + err.message)
})
5.定义分离函数
使用fs.writeFile()方法，可以向指定的文件中写入内容
注意正则表达式中的.exec()函数
- 如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本。
- replace() 方法将替换匹配的子串。 注意：因为使用的replace()是局部作用域所以只能搜索到一个style，也就是说只能再只有一个style的页面使用
function resolveCSS(htmlStr) {
const r1 = regStyle.exec(htmlStr)
const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
// replace属性为查询替换属性 此处的目的为将表现转化为空白字符
fs.writeFile('./index.css', newCSS, function(err) {
if (err) {
return console.log('写入文件失败!' + err.message)
}
console.log('文件写入成功！')
})
}
当然分离js与html代码也同理
function resolvejs(htmlStr) {
const r2 = regscript.exec(htmlStr)
const newJS = r2[0].replace('<script>', '').replace('</script>', '')
fs.writeFile('./index.js', newJS, function(err) {
if (err) {
return console.log('写入文件失败!' + err.message)
}
console.log('文件写入成功！')
})
}
function resolveHTML(htmlStr) {
const newHTML = htmlStr.replace(regStyle, '<link ref="stylesheet" herf="./index.css"> ')
.replace(regscript, '<script src="./index.js"></script>')
fs.writeFile('./index2.html', newHTML, function(err) {
if (err) {
return console.log('写入文件失败!' + err.message)
}
console.log('文件写入成功！')
})
}
6.最后记得再开始读取文件结束后调用函数
resolveCSS(datastr)
resolvejs(datastr)
resolveHTML(datastr)
结尾
ok 这篇文章的内容到这里就结束了 希望你能有一个好的前端队友/工友
