微客导航 » 文章资讯 » npm script 的文件监听和自动刷新的命令详解

npm script 的文件监听和自动刷新的命令详解

2023-08-22 13:00:05 360

文件监听的作用是为了实现自动化，释放双手和精力，提高效率，让开发者更加关注于开发。npmscript文件监听和grunt、gulp功能类似。

自动刷新，意思就是改动文件保存后，页面自动刷新，减少日常开发的操作。

代码检查的监听和自动化

代码检查工具stylelint、eslint、jsonlint这些对watch支持很弱，所以就需要引入工具包 onchange

安装命令依赖包

npmionchange-D
//或
yarnaddonchange-D

编写命令

"scripts":{
"//watch":"#监听",
"test":"#单元测试\ncross-envNODE_ENV=testmochatests/",
"watch:test":"npmtest----watch",
"watch:lint":"onchange-i\"**/*.js\"\"**/*.less\"--npmrunlint:css",
"watch":"npm-run-all--parallelwatch:*",
}

剖析命令

使用 \"是为了实现跨平台兼容；
使用了 **/*匹配通配符；
参数 -i是让 onchange在启动时就运行一次 --之后的命令；

执行命令

npmrunwatch

实现自动刷新

本章主要说的是livereload。

安装命令依赖包

npmilivereload-D
//或
yarnaddlivereload-D

编写命令

"scripts":{
"//livereload":"#自动刷新",
"client":"npm-run-all--parallelclient:*",
"client:reload-server":"livereloadsrc/",
"client:static-server":"http-serversrc/"
}

页面添加连接js脚本

//src/index.html






npmscript



你好，npmscript





/*src/index.css*/
body{
color:#fff;
background-color:green;
}

总结

以上所述是小编给大家介绍的npmscript的文件监听和自动刷新的命令详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

npm script 的文件监听和自动刷新的命令详解

你好，npmscript

热门推荐

随机推荐