https://github.com/rla/frontend-js-build

Makefile-based build workflow for front-end JavaScript
https://github.com/rla/frontend-js-build

browserify javascript-bundle workflow

Last synced: 7 months ago
JSON representation

Makefile-based build workflow for front-end JavaScript

• Host: GitHub
• URL: https://github.com/rla/frontend-js-build
• Owner: rla
• License: mit
• Created: 2014-07-01T22:20:39.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-03-12T23:26:31.000Z (almost 11 years ago)
• Last Synced: 2025-03-06T01:25:18.033Z (11 months ago)
• Topics: browserify, javascript-bundle, workflow
• Language: JavaScript
• Homepage:
• Size: 172 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# frontend-js-build

Frontend JavaScript workflow with toolset:

 * watch

 * make

 * browserify

 * uglifyify

 * brfs

 * exorcist

Supported features:

 * CommonJS-based JavaScript modules.

 * Single bundled and minified JavaScript file.

 * Same bundle for development and production.

 * Source Maps.

 * Project-local toolset.

## Project structure

 * `Makefile` - build rules, not very abstract but give the idea how tools work.

 * `package.json` - contains local NPM dependencies.

 * `public/js/app/app.js` - the entrypoint JavaScript file.

 * `public/js/bundle.js` - the JavaScript bundle.

 * `public/js/bundle.js.map` - Source Map file for the JavaScript bundle. Loaded by the browser

   when the debugger is open.

 * `public/misc` - directory containing miscellaneous files included in the bundle.

## Tools

The following tools are used:

 * [make](http://en.wikipedia.org/wiki/Make_%28software%29) - the build tool.

 * [watch](http://en.wikipedia.org/wiki/Watch_%28Unix%29) - triggers periodic builds.

 * [browserify](http://browserify.org/) - converts CommonJS-based JavaScript modules into a bundle file.

 * [uglifyify](https://github.com/hughsk/uglifyify) - Browserify plugin that minifies the bundle code.

 * [brfs](https://github.com/substack/brfs) - Browserify plugin that embeds non-JS files into bundles.

 * [exorcist](https://github.com/thlorenz/exorcist) - extracts the source map and places it into a separate file.

Installing tools (assumes that make and watch are already installed):

    npm install

## Build targets

 * all - builds bundle.

 * clean - removes bundle.

Building periodically (2s):

    watch make

## Build dependencies

Due to Makefile specifics, dependencies have to updated manually when

creating new directories under `public/js`.

Current dependencies:

    $(BUNDLE): public/js/app/app.js public/js/app/*.js

Adding a directory `something` under `app` requires the following change:

    $(BUNDLE): public/js/app/app.js public/js/app/*.js public/js/app/something/*.js

This is because `make` cannot handle recursive file patterns. The main entry

point `public/js/app/app.js` must come as the first dependency.

## Notes

The Makefile contains `.DELETE_ON_ERROR:` which causes it to remove the target file

when build fails. This is a workaround to .

## What is not included

 * Testing. Many approaches and tools to choose from.

 * Linting. JSLint vs JSHint vs ESLint.

 * ES6. Could be added with the [babelify](https://github.com/babel/babelify) Browserify transform.

 * CSS. Many tools to choose from (Less, Sass, SCSS, Stylus, ...).

## Alternative choices

 * uglifyify+exorcist can be replaced with the [minifyify](https://github.com/ben-ng/minifyify) transform.

 * [webpack](https://github.com/webpack/webpack) provides integrated solution for all of this.

## License

The MIT License.