gangle
GANGLE! is the most over opinionated Javascript build system and webserver ever. It watches your JS files, concats them to the folder it expects and runs browser-sync to watch your changes and auto refresh the browser.
gangle
GANGLE! Is a simple one step webserver and build system that watches the file system for changes to Javascript files. When it sees a change, it concats ALL of your Javascript and links back to the browser with the change, real-time.
INSTALLATION: npm install gangle -g
USAGE: Just browse to the folder that your web application is in and type 'gangle', everything is just done for you. If you add a new file, run 'gangle' again, sorry that's the way it is (for now).
What happens now is pretty opinionated.
- GANGLE! expects that you want to concat ALL of your Javascript, nothing else, just Javascript.
- GANGLE! then puts the Javascript in a new build folder/file called './dist/all.min.js'.
- GANGLE! does this for every file that is of the type javascript, regardless of whether you want it to or not.
- There is no build order.
- There is no minification.
- There is no config (If you want one, use Webpack).
- 'node_module' folders and JSON files are excluded.
- To run the webserver and start, which is BrowserSync, just type 'gangle'
- GANGLE! has to be installed globally.
YOUR PROJECT TREE (EXAMPLE):
This is only a rough example of a simple project, but is enough to illustrate which files are actually built and which are ignored.
.
├── node_modules
| ├── module 1 * Ignored
| ├── module 2 * Ignored
| └── module 3 * Ignored
├── _vendor
| ├── angular
| ├── angular.min.js * Built into ./dist/all.min.js
├── src
| ├── file1.js * Built into ./dist/all.min.js
| └── file2.js * Built into ./dist/all.min.js
├── css
| └── custom.css
| └── component.css
├── dist
| ├── all.min.js * File generated by GANGLE!
├── templates
| └── file1.html
└── index.html
└── package.json * Ignored
└── myscript.js * Built into ./dist/all.min.js
Which means once a file changes, look into the './dist/all.min.js' file. This contains everything.
Just make a reference to this file in your html.
Personal Note........... This is just a backlash against Javascript in general. I spend 15 minutes when configuring a new Javascript project with webserver, gulp, concat files, ignoring files, bleugh. It's tedious. If I make a new demo in an AngularJS 1.x project I want to be working in minutes. And for that I don't need tests, or Gulp, or Webpack. This is just step one to test or demo an idea. GANGLE! gives me that. In an over opinionated way where I don't need to think about anything.
It's never going to set the world alight. But as a journey, I like to think about build systems in the simplest possible way.
Convention over configuration just gives me a huge boost to get started.