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 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
微信小程序实现点击效果
Jun 21 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 curl模拟浏览器抓取网站信息
2013/10/28 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php实现的漂亮分页方法
2014/04/17 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
浅谈Vue.js
2017/03/02 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
vue实现评价星星功能
2020/06/30 Javascript
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
中职生自我鉴定范文
2013/10/03 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
庆六一开幕词
2015/01/29 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Python集合set()使用的方法详解
2022/03/18 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS