gulp加批处理(.bat)实现ng多应用一键自动化构建


Posted in Javascript onFebruary 16, 2017

批处理

常用常见的批处理文件有.bat文件,可用文本编辑器直接编辑内部代码,运行也比较方便,windows平台直接双击执行即可,具体请自行了解。

需求背景

angular项目中,当项目越来越大时,很多通用模块(module)可能需要抽象出来,这是一点,另外可能有某些子应用也会单独抽离出来,这是另一点。

当一个大型项目同时包括多个子应用时,编码后的编译或者打包就会比较麻烦,特别是在项目持续集成的一种状态下,或者项目组有新成员(经验稍微薄弱)情况下。

需要了解

看下面的代码之前,如果您是angular使用者+gulp使用者,为了更好的理解下面的代码,你可能需要了解以下东西:node、npm、node_modules、gulp。

如果您不使用angular或者gulp,也没有太大关系,你可以通过我肤浅的解释来理解一些批处理相关的操作,以应用到其他用途。

示例&&解释

// 关闭回显,加上这句,当前执行的命令不会显示(即,下面这些代码不会显示在屏幕上)
 @echo off

 // 读取run_config.txt文件第一行数据,以参数domain存储,然后跳转到secondArgs命令执行
 // 我这么写不可取,跳转secondArgs命令主要用于读取第二行数据
 for /f %%i in (run_config.txt) do (
 set domain=%%i
 goto secondArgs
 )

 // 读取第二行数据以参数dir存储
 :secondArgs
 for /f %%i in (run_config.txt) do (
 set dir=%%i
 )

 // 输出参数domain、dir
 echo the root path is:%domain%
 echo the project path is:%dir%

 echo AUTO RUNING, PLEASE ENTER ACCORDING THE TIPS......

 // begin命令
 :begin
 echo ************TIPS START************
 echo at the first use,please input 'm' to set root path and project path according the tips.
 echo ************TIPS ENDS!************

 // 改变字体颜色,可选颜色不多
 color 07
 // 以命令选择的形式,给使用者选择的权利,其中将各个项目(各应用)需要的打包分离出来,分别对应相应的自动化构建脚本命令
 // 以字母RCAPMQ一一对应,例如输入Q,则进入exit命令
 choice /m ROOT,COMMONS,APP,PORTAL,MODIFY,EXIT /c:RCAPMQ

 if errorlevel 6 goto exit
 if errorlevel 5 goto modify
 if errorlevel 4 goto portal
 if errorlevel 3 goto app
 if errorlevel 2 goto commons
 if errorlevel 1 goto root

 :root
 color 0a
 // 用于进入对应的盘符
 %domain%
 // 用于进入对应的项目目录
 cd%dir%
 // 执行当前目录下的gulp命令
 node %domain%%dir%\node_modules\gulp\bin\gulp.js
 echo -----------------------------ROOT PROCESS FINISHED!----------------------------
 // 跳转begin命令,可以让使用者进行下一次使用
 goto begin
 // 以下几个命令类似上面

 :commons
 color 0d
 %domain%
 cd%dir%\commons
 node %domain%%dir%\node_modules\gulp\bin\gulp.js
 echo ----------------------------COMMONS PROCESS FINISHED!--------------------------
 goto begin

 :app
 color oe
 %domain%
 cd%dir%\app
 node %domain%%dir%\node_modules\gulp\bin\gulp.js debug
 echo ---------------------------APP_BASE PROCESS FINISHED!--------------------------
 goto begin

 // 该命令可以进行多个应用的一键构建
 :portal
 color 0a
 %domain%
 cd%dir%
 node %domain%%dir%\node_modules\gulp\bin\gulp.js
 cls
 echo -----------------------------ROOT PROCESS FINISHED!----------------------------
 echo ***************************COMMONS PROCESS STARTING!***************************
 color 0d
 %domain%
 cd%dir%\commons
 node %domain%%dir%\node_modules\gulp\bin\gulp.js
 cls
 echo ----------------------------COMMONS PROCESS FINISHED!--------------------------
 echo ******************************APP PROCESS STARTING*****************************
 color 0e
 %domain%
 cd%dir%\app
 node %domain%%dir%\node_modules\gulp\bin\gulp.js debug
 cls
 echo ------------------------------APP PROCESS FINISHED-----------------------------
 echo *******************************************************************************
 color 0f
 goto begin

 // modify命令用于修改盘符及项目目录路径
 :modify
 // 删除config文件
 del run_config.txt
 // '/p'会暂停当前命令
 // 此处主要用于获取用户输入
 set /p domain=please input yours root path,end with ':', eg.'d:':
 echo the root path is:%domain%
 // 输出输入的信息并保存到config文件中
 @echo %domain%>>run_config.txt

 set /p dir=please input yours project path, start with '/', eg. '/xx/xx':
 echo the project path is:%dir%
 @echo %dir%>>run_config.txt
 goto begin

 // 关闭当前窗口
 :exit
 pause

心得

弄这个.bat文件,主要也是为了偷懒。花了一点时间查找了相应的操作、使用说明,也算是初步可用。

目前使用起来也比较方便,可以在以后有机会时再次自定义一个类似文件,便捷开发,提高效率。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 #Javascript
Js apply方法详解
Feb 16 #Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 #Javascript
js实现文字无缝向上滚动
Feb 16 #Javascript
node学习记录之搭建web服务器教程
Feb 16 #Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 #Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 #Javascript
You might like
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
js form action动态修改方法
2008/11/04 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
python实现学生管理系统
2018/01/11 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书