npm script 的文件监听和自动刷新的命令详解
文件监听的作用是为了实现自动化,释放双手和精力,提高效率,让开发者更加关注于开发。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.htmlnpmscript 你好,npmscript