Using Gulp and Batch Processing (.bat) to Implement One-click Automation Construction of Multiple Angular Applications

Batch Processing

Common batch processing files include .bat files, which can be directly edited by a text editor, and running is also convenient. Double-click to execute directly on the Windows platform. Please refer to the specific information for yourself.

Background of Requirements

In angular projects, as the project grows larger, many common modules (module) may need to be abstracted out, this is one point, and there may also be some sub-applications that need to be extracted separately, this is another point.

When a large project includes multiple sub-applications at the same time, the compilation or packaging after coding will be more麻烦, especially in a state of continuous integration of the project, or when there are new members (with slightly weaker experience) in the project team.

You need to understand

Before looking at the following code, if you are an angular user+For gulp users, to better understand the following code, you may need to understand the following: node, npm, node_modules, gulp.

If you do not use angular or gulp, it's not a big deal either. You can understand some batch processing operations through my superficial explanation and apply them to other purposes.

Example && Explanation

 // Disable echo, add this sentence, the currently executed command will not be displayed (i.e., the following code will not be displayed on the screen)
 @echo off
 // Read the first line of the run_config.txt file and store it as the parameter domain, then jump to the 'secondArgs' command to execute.
 // It is not advisable to write like this, jump to the 'secondArgs' command is mainly used to read the second line of data.
 for /f %%i in (run_config.txt) do (
 set domain=%%i
 goto secondArgs
 )
 // Read the second line of data and store it as the parameter dir.
 :secondArgs
 for /f %%i in (run_config.txt) do (
 set dir=%%i
 )
 // Output parameters domain, dir
 echo the root path is:%domain%
 echo the project path is:%dir%
 echo AUTO RUNNING, PLEASE ENTER ACCORDING TO THE TIPS......
 // begin command
 :begin
 echo ************TIPS START************
 echo At first use, please input 'm' to set the root path and project path according to the tips.
 echo ************TIPS ENDS!************
 // Change the font color, the optional colors are not many.
 color 07
 // In the form of command selection, give users the right to choose, among which the packaging separation required for each project (application) is separated out and corresponds to the corresponding automated build script command.
 // Correspond to each project (application) with the letter RCAPMQ, for example, if you enter Q, it will enter the 'exit' command.
 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
 // Used to enter the corresponding drive.
 %domain%
 // Used to enter the corresponding project directory.
 cd%dir%
 // Execute the 'gulp' command in the current directory.
 node %domain%%dir%\node_modules\gulp\bin\gulp.js
 echo -----------------------------ROOT PROCESS FINISHED!----------------------------
 // Jump to the 'begin' command to allow users to proceed to the next use.
 goto begin
 // The following commands are similar to the above.
 :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
 // This command can perform one-click builds for multiple applications.
 :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
 // The modify command is used to modify the disk letter and project directory path
 :modify
 // Delete the config file
 del run_config.txt
 // '/p' will pause the current command
 // This is mainly used to obtain user input
 set /p domain=please input yours root path, end with ':', eg.'d:':
 echo the root path is:%domain%
 // Output the input information and save it to the config file
 @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
 // Close the current window
 :exit
 pause

Experience

The main purpose of making this .bat file is to be lazy. I spent some time looking for the corresponding operations and usage instructions, which is also initially available.

It is also quite convenient to use, and you can customize a similar file again when you have the opportunity, which is convenient for development and improves efficiency.

That's all for this article. I hope the content of this article can bring some help to your learning or work. If you have any questions, you can leave a message for communication. Thank you for your support of the Niao A Tutorial.