node package manager


Watches (current) directory */.js files and re-generates main.js

Watches (current) directory */.js files and re-generates main.js, responsible for loading whole client-side application

  • it does so by injecting <script src=""> tags during development
  • files are loaded synchronously
  • debugging is still possible, original files are left untouched
  • can be also minified to one dist file during build process (using uglifyjs --no-mangle)

Directories starting with dot are ignored, this makes it perfect place for your bower dependencies. Use .bowerrc to override bower components directory.

Files as loaded alphabetically, with each directory treated as module, dependent on its children. This can be better understood with following example:


Where app.js will be loaded last, Product will be loaded before Cart but after ActiveRecord, because it is in folder above. Jquery will be loaded first in this example.

Resulting order:

  1. !deps/jquery.js
  2. !deps/jquery.plugin.js
  3. common/BaseModel.js
  4. eshop/products/Product.js
  5. eshop/Cart.js
  6. users/User.js
  7. app.js'

It is possible to override both filename, directory and/or glob-pattern, however it is discouraged to do so except for timestamped dist files.

npm install -g main-js

Usage: main-js [options]
       Watches (current) directory **/*.js files and re-generates main.js


  -h, --help                output usage information
  -V, --version             output the version number
  --target [file]           target file name (main.js)
  --directory [dir]         dir to scan for js files (.)
  --pattern [glob-pattern]  custom js-file pattern (**/*.js)
  --build                   minify sources to target file, do not watch

Development - watch for file changes:
  cd my-web-app

Build - generate "big" dist file:
  cd my-web-app
  main-js --build

NOTE: Do not commit generated files to SCM, use --build flag during build instead