前言
- 随着前端开发技术的不断发展,前端开发工作也变得越来越复杂,如果能合理地采用一些自动化的工具,生活要容易得多。
- 业内比较成熟的解决方案诸如webpack、rollup、gulp、grunt等前端构建工具相信很多FE都或多或少的接触过,这些工具各有千秋,放在合适的应用场景下都能解放生产力,然而就笔者的使用体验,配置这些工具还是比较复杂的。直到遇到npm scripts,发现这也许是另一种比较优秀的解决方案,所以把我使用npm scripts作为构建工具的使用配置记录下来,分享给爱鼓捣的FE!
开发环境配置 package.json相关依赖文件说明
- 使用express作为静态文件服务器
- 使用.pug模板引擎作为express默认渲染引擎
- 使用parallelshell并行运行cmd命令
- 使用livereload自动刷新浏览器
- 使用nodemon实现express热启动
(ps:笔者的nodemon模块安装在全局,所有没有写入package.json)
-
Node环境下npm install安装完相关依赖包
-
将命令行中的指令写入了npm scripts当中
-
使用npm run *** 代替在cmd中输入代码
-
parallelshell 将nodemon 和 livereload合并
-
执行npm run dev来运行我们的开发环环境
livereload的使用在npmjs.com-livereload中记载了详细方法,笔者采用了chrome浏览器插件的方法
最后附上演示效果
基于nodenon + livereload实现开发环境下浏览器无手动刷新热启动
-- 年终鼓捣篇技术贴压压惊 -- 2017年12/31 by 夸里