loading...
Cover image for Modern JavaScript Project Workflow/Setup with Git, CI/CD, Code Quality, Tooling and more

Modern JavaScript Project Workflow/Setup with Git, CI/CD, Code Quality, Tooling and more

rajeshroyal profile image Rajesh Royal ・2 min read

Modern Project


  • Version control
  • Automated CI / CD
  • Code quality
  • Tooling
  • Module support
  • Documented API
  • Demos

Build Process


The automated sequence of tasks which runs on each push, tag, and/or release

Stages

  1. Install
  2. Lint
  3. Test
  4. build
  5. Push
  6. Deploy

Jobs

  • Install
    • clean install - npm ci
    • security audit - npm audit
  • Lint
    • linter - eslint / stylelint
    • formatter prettier
  • Test
    • test suite - jest / mocha / ava
    • code coverage - nyc / codecov / coveralls
  • Build
    • transpile - babel / typescript / flow
    • pre-process (compile, auto-prefix, etc.) - sass / less / postcss
    • uglify (minify, mingle, optimize, etc.) - uglify-js / terser
    • bundle (concat, tree-shake, etc.) - webpack / rollup / parcel
    • compress (gzip, etc.)
    • other
      • copy / delete / move files
      • check bundle size
      • strip unused code (ts/flow/proptypes)
  • Push
    • release - GitHub / bitbucket / Gitlab
    • publish - npm /other registries
  • Deploy
    • host - heroku / surge / github-pages / etc.
  • Documentation

Task execution


  • CLI (npm) or
  • task runner
    • grunt, gulp, brunch

Your Feedbacks are more than welcome 🤗🤗

Posted on by:

rajeshroyal profile

Rajesh Royal

@rajeshroyal

Designer, Front-end Developer, Traveller, Hooper. I design and code beautifully simple things, and I love what I do.

Discussion

pic
Editor guide
 

Nice article!

Perhaps you can elaborate a bit more per step in a future article, like in depth per fase?

 

yes. I will definitely try to do this. Thanks, Chris 🙂