node.js前端自动化构建--热启动

前言

• 随着前端开发技术的不断发展，前端开发工作也变得越来越复杂，如果能合理地采用一些自动化的工具，生活要容易得多。
• 业内比较成熟的解决方案诸如webpack、rollup、gulp、grunt等前端构建工具相信很多FE都或多或少的接触过,这些工具各有千秋,放在合适的应用场景下都能解放生产力,然而就笔者的使用体验,配置这些工具还是比较复杂的。直到遇到npm scripts,发现这也许是另一种比较优秀的解决方案,所以把我使用npm scripts作为构建工具的使用配置记录下来,分享给爱鼓捣的FE!

开发环境配置 package.json相关依赖文件说明

1. 使用express作为静态文件服务器
2. 使用.pug模板引擎作为express默认渲染引擎
3. 使用parallelshell并行运行cmd命令
4. 使用livereload自动刷新浏览器
5. 使用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 夸里

转载于:https://juejin.im/post/5a4799c351882560b76c81bd