Skip to main content
Learn Git Branching uses Gulp as its build system. Understand the different build commands and when to use them.

​
Build Commands

​
Fast Build

For rapid development iteration without tests or linting: 
yarn gulp fastBuild
This command:
  • Bundles JavaScript with Browserify
  • Processes JSX with Babel
  • Concatenates CSS files
  • Generates index.html from template
  • Skips tests and linting for faster builds
Use this during active development when you want quick feedback on your changes.

​
Production Build

For a complete build with all quality checks: 
yarn gulp build
This command:
  • Runs all fastBuild steps
  • Executes the full test suite
  • Runs JSHint linting
  • Minifies JavaScript with Terser
  • Minifies CSS
  • Hashes filenames for cache busting
  • Minifies HTML output
Use this before committing changes or creating pull requests.

​
Watch Mode

Automatically rebuild when files change: 
yarn gulp watching
This starts a file watcher that rebuilds the project whenever you save changes to source files.

​
Development Server

Start the Vite development server with hot module replacement: 
yarn dev
The dev server provides:
  • Fast startup time
  • Hot module replacement (HMR)
  • Instant updates without full page reload
  • Better error messages in the browser
The Vite dev server is recommended for rapid development. For testing the full build output, use yarn gulp fastBuild and open index.html directly.

​
Testing

​
Run All Tests

Execute the complete Jasmine test suite: 
yarn test
or directly with Gulp: 
gulp test

​
Test Coverage

Run tests with NYC coverage reporting: 
yarn test:coverage
This generates a coverage report showing which lines of code are tested.

​
Run Specific Tests

Execute a single test file: 
npx gulp-jasmine __tests__/git.spec.js
Replace git.spec.js with any test file in the __tests__/ directory.

​
Linting

​
JavaScript Linting

Run JSHint on all source files: 
gulp jshint

​
String Validation

Validate internationalization strings: 
gulp lintStrings
This ensures all translations are properly formatted and consistent across locales.

​
Viewing Your Changes

1

Build the project

Run a build command:
yarn gulp fastBuild
2

Open in browser

Open the generated index.html file directly in your browser:
# macOS
open index.html

# Linux
xdg-open index.html

# Windows
start index.html
Or simply drag the file into your browser window.
3

Test your changes

Interact with the application to verify your changes work as expected. Use the browser’s developer tools for debugging.

​
Build Output

After building, you’ll find:
  • index.html: Generated HTML file in the root directory
  • build/: Directory containing bundled JavaScript and CSS
    • JavaScript bundles (hashed filenames in production)
    • CSS stylesheets (concatenated and minified)

​
Common Workflows

​
Making a Quick Change

# Edit source files
vim src/js/git/index.js

# Fast build to see changes
yarn gulp fastBuild

# Open in browser
open index.html

​
Preparing a Pull Request

# Make your changes
vim src/js/commands/index.js

# Run full build with tests
yarn gulp build

# If tests pass, commit your changes
git add .
git commit -m "Add new feature"

​
Debugging Build Issues

Try removing and reinstalling dependencies:
rm -rf node_modules
yarn install
Run tests in isolation to identify the problem:
npx gulp-jasmine __tests__/git.spec.js
Check the test output for specific failures.
Review JSHint output and fix code style issues:
gulp jshint
Common issues include missing semicolons, unused variables, and incorrect indentation.

​
Build Process Details

The build system performs these steps:
  1. JavaScript bundling: Browserify bundles all modules starting from entry points
  2. JSX transformation: Babel transforms React JSX syntax to JavaScript
  3. CSS processing: Concatenates all CSS files from src/style/
  4. Template processing: Injects bundled assets into template.index.html
  5. Minification (production only): Terser minifies JavaScript, clean-css minifies CSS
  6. Hashing (production only): Adds content hashes to filenames for cache busting
  7. Testing: Runs Jasmine test suite
  8. Linting: Validates code with JSHint
All of this happens automatically when you run yarn gulp build.

Build docs developers (and LLMs) love

Get started for freeTalk to us