Translation: crazy geek medium.com/dailyjs/how…

We often do a lot of tedious tasks at work: update configuration files, copy and paste files, update Jira tags, etc.

Over time, you will spend more and more time on these tasks. When I worked for an online game company in 2016, there were many similar jobs. I was building configurable templates for games, which might have been valuable, but due to the skin resetting, I had to spend about 70% of my time making copies of those games, templates, and deployments.

What is Reskin?

Reskin’s definition is to use the same game mechanics, screen and element positioning, but change the visual aesthetics, such as colors and resources. . So for a simple game like rock, Paper, Scissors, we’ll create a template with the following basic resources.

But when we create a Reskin, we use different resources while still making sure the game works. If you’ve ever played games like Candy Crush Saga or Mad Birds, they usually release a lot of similar games around Halloween, Christmas, or Easter. It makes sense from a business point of view. Now… Let’s go back to implementation. Each of our games shared the same JavaScript files and loaded them into JSON files with different content and resource paths. What’s the result?

In fact, I and other developers already had so much backlog on their schedules that my first thought was, “A lot of this could be automated.” Every time I create a new game, I have to perform the following steps:

  1. Git pull on template repositories to make sure they are up to date;
  2. Create a new branch from the primary branch — identified by the Jira fault ticket ID;
  3. Make copies of the templates I need to build;
  4. Run gulp;
  5. Update the contents of the config.json file. This will involve the resource path, title, and data for the service request;
  6. Build locally and check what matches the relevant person’s Word document.Yes, I know;
  7. Check with the designer if they are happy with the look;
  8. Merge into the main branch and proceed to the next branch;
  9. Update the status of the Jira tag and comment for those concerned;
  10. Liquidate and repeat.

By comparison, it’s a lot more administrative than just development. I’ve dabbled with Bash scripts before and used them to create some scripts to reduce the workload. One script updates the template and creates a new branch, while the other performs the commit and merges the project into the demo and production environment.

It usually takes three to ten minutes to set up the project manually, and five to ten minutes to deploy. But depending on the complexity of the game, it can take anywhere from ten minutes to half a day. While scripts can be helpful, it still takes a lot of time to update content or track down missing information.

Writing code to shorten time is not enough. We also need to think about good ways to optimize our workflow so that we can rely more on scripts. Such as moving content out of a Word document and into a Jira tag, and then breaking it up into related custom fields. Instead of sending a link to the location of the resource on a common drive, the designer sets up a content delivery Network (CDN) repository that contains the URL for staging and publishing the resource to the production environment.

Jira API

These things may take a while to implement, but our processes do improve over time. I did some research on the API of Jira, our project management tool, and came up with a lot of valuable data by making some requests to the Jira tags I was processing, so I decided to integrate these requests into my Bash script to be able to read the values from the Jira tags, Post comments and inform relevant people after completion.

Transition from Bash to Node

Bash scripts are fine, but they won’t run if someone is working on a Windows machine. After doing some digging, I decided to wrap the entire process in JavaScript as a custom build tool. I’m calling this tool Mason, and it’s going to change everything.

CLI

When you use Git in a terminal (and I assume you do), it has a very friendly command line interface. If you misspell or type a wrong command, it will kindly suggest what it thinks you want to type. A library called Commander, one of many I use, should provide the same functionality.

Refer to the simplified code example below. It is booting command line interface (CLI) programs.

src/mason.js

With NPM, you can run a link from package.json that will create a global alias.

npm link
Copy the code

It will provide me with a command to call, called Mason. So whenever I call Mason from the terminal, it will run the Mason.js script. All missions belong to a single composite command called Mason, which I use every day to build the game, and the time saved is literally…… It’s incredible.

You can see it below: I pass the Jira tag number as an argument to the command. This will use curl to request the Jira API and get all the information needed to update the game. It then proceeds to build and deploy the project. At the end I comment and flag the people and designers to let them know the work is done.

$ mason create GS-234 ... calling Jira API ... OK! got values! . creating a new branch from master called'GS-234'. updating templates repository ... copying from template'pick-from-three'. injecting values into config JSON ... building project ... deploying game ... Perfect! Here is the live link http://www.fake-studio.com/game/fire-water-earth ... Posted comment'Hey [~ben.smith], this has been released. Does the design look okay? [~jamie.lane]' on Jira.
Copy the code

With these we complete the key steps! I’m very pleased with the whole project.

Welcome to pay attention to the public number: front-end pioneer, get more front-end dry goods.