Related introduction

1. The badge

These badges can be created through websites such as shields. IO. Badge status data can be static or real-time.

They can often be found in well-known open source projects, and they are a status symbol!

Lol, just kidding, these badges are more useful for making people think your project is more credible. You might be thinking…

2. Travis-CI

A continuous integration tool available at Travis.org (free) and travis.com (free) for all publicly owned Github projects.

Ps: 😭 the latest charging rules have been changed: blog.travis-ci.com/2020-11-02-…

Related task lifecycle documentation: docs.travis-ci.com/user/job-li…

3. Codecov

By collecting coverage reports and other key information for static analysis, it does not itself run test cases to obtain coverage of project code.

4. Github profile

You can configure static resources for your own projects on the Github homepage.

  1. Configure GitHub Pages in project Settings

2. Assign a branch to GitHub Pages site. The files in the branch should be static files packed in the front end

The target

  1. Build to GitHub Pages is automatically triggered when we push code to the specified branch (master in our case)
  2. Earn build badges and test coverage badges

To prepare

  1. A publicly owned Github project
  2. Log in to Travis.org using your Github account

Add the project

Open after LoginTravis-ci.org/account/rep…, add the project

Configure the.travis. Yml file

Add a.travis. Yml file to the root of your project and initialize it as follows:

# .travis.yml
language: node_js # Front-end engineering so JavaScript, compile environment is node_js
git:
  depth: 1 Clone only the latest commit
node_js:
  - 'lts/*' # Specify node.js version
branchs:
  only:
    - master # specify that git tasks are executed only if changes to the master branch are detected
Copy the code

🎉🎉🎉 At this point, when we submit code to the master branch, the Travis virtual machine will start running the tasks configured in the file. You can see the details of this build here

When running a project whose language is node_js, the default script is NPM test, so you may see Travis execute the NPM test command himself, as detailed here

Because our configuration is simple, the overall task passes without error,It will show passing, but that’s not our goal, we have to get Travis to do something.

Configuration Codecov

  1. Install Codecov in the project
    npm i --save codecov
Copy the code

There is a small point, which you may see in other tutorials, that you need to configure a Codecov environment variable for Travis, but you don’t need it, and you will find that you can upload test reports without it. /node_modules/.bin/codecov: Public projects do not require codcov tokens.

  1. In Angular projects, NPM test starts a test service by default and remains in watch state, causing the Travis task to never end.

Therefore, we need to modify the test script in package.json as follows:

  "scripts": {
    "ng": "ng"."start": "ng serve"."build": "ng build --base-href /my-github/ --prod"."test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --code-coverage"."lint": "ng lint"."e2e": "ng e2e"
  },
Copy the code

The –code-coverage parameter generates test reports. — Browsers =ChromeHeadlessCI can run browsers in the background

  1. Finally, you need to go to karma. Conf. js to modify the configuration and add customLaunchers
    autoWatch: true.browsers: ['Chrome'].customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless'.flags: ['--no-sandbox']}},Copy the code

For making token

  1. In github.com/settings/to… A new token is generated. The following figure shows the permission configuration:

Github will not display the token the next time you enter the page.

  1. Configure the generated token to Travis as an environment variable

We create a GITHUB_TOKEN environment variable with the value of the newly generated token

With that in mind, let’s finally configure.travis. Yml

Modify the.travis. Yml file

# .travis.yml
language: node_js # Front-end engineering so JavaScript, compile environment is node_js
git:
  depth: 1 Clone only the latest commit
node_js:
  - 'lts/*' # Specify node.js version
env:
  global: GITHUB_TOKEN=$GITHUB_TOKEN Clone only the latest commit
branchs:
  only:
    - master # specify that the task will be executed only if changes to the master branch are detected
install:
  - npm i After cloning the project, install it
script:
  - npm run test Generate test reports
  - npm run build Package to generate static resources
after_script:
  - if [[ "$TRAVIS_TEST_RESULT" = = 0 ]]; then ./node_modules/.bin/codecov; fi Upload a report after executing Travis test task without error
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN Environment variable GITHUB_TOKEN in # Travis Setting
  local-dir: ./dist/my-github # Customize to static file output directory as required
  target-branch: gh-pages Static resources are committed to this branch after construction
  verbose: true
  on:
    branch: master
Copy the code

The configuration file has been annotated, so if you have any questions, you can comment on the exchange and see the build details here. You can also refer to the demo project

The next article will continue with Travis-CI automated deployment to the server.