Why I wrote this?
So to overcome this problem I wrote a gulp task which automated this process for me. So I thought about converting this to a command line utility which can take 2-3 parameters and do the job for us. We dont even need to write any gulp task file. Its all being written by this utility.
spa depends on some very cool nodejs modules available which help spa to generate build files.
Major modules are as follows:
- Support files minification for prod and left file untouched for dev.
- maintain a separate directory for our distribution.
- Can choose source and destination folders.
npm install spa-hero
- build-dev (we choose this command when we dont want spa to concat and minify our files.)
- build-prod (for production use)
- -h or –html (relative path for the directory of your index.html file)
- -a or –app (relative path for the directory of your JS/CSS code)
- -d or –dest (relative path for the directory of your distribution folder)
Step 1. Open your index.html file.
Step 2. Modify your html with blocks as shown below
<!-- build:<type>(alternate search path) <path> <parameters> --> ... HTML Markup, list of script / link tags. <!-- endbuild -->
- type either js, css or remove; remove will remove the build block entirely without generating a file
- alternate search path (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
- path the file path of the optimized file, the target output
- parameters extra parameters that should be added to the tag
An example of this in completed form can be seen below:
<html> <head> <!-- build:css libs/css/combined.css --> <link href="css/one.css" rel="stylesheet"> <link href="css/two.css" rel="stylesheet"> <!-- endbuild --> </head> <body> <!-- build:js libs/js/angular.min.js--> <script src="../node_modules/angular/angular.js"></script> <!-- endbuild --> <!-- build:js libs/js/angular-route.min.js--> <script src="../node_modules/angular-route/angular-route.js"></script> <!-- endbuild --> <!-- for production, you can combine above third party files by putting all of them in single block --> <script src="app.js"></script> <script src="view1/view1.js"></script> <script src="view2/view2.js"></script> <script src="components/version/version.js"></script> <script src="components/version/version-directive.js"></script> <script src="components/version/interpolate-filter.js"></script> </body> </html>
The resulting HTML would be:
<html> <head> <link rel="stylesheet" href="libs/css/combined.css"/> </head> <body> <script src="libs/js/angular.min.js"></script> <script src="libs/js/angular-route.min.js"></script> <script src="app.js"></script> <script src="view1/view1.js"></script> <script src="view2/view2.js"></script> <script src="components/version/version.js"></script> <script src="components/version/version-directive.js"></script> <script src="components/version/interpolate-filter.js"></script> </body> </html>
See gulp-useref for more information.
Step 3: Open command prompt or terminal and go to the directry of your project and run
spa build-dev -h app -a app -d dist
spa build-prod -h app -a app -d dist
Sample project structure.
And this is what we got after spa-hero take charge:
You will see a new directry called dist with all of your files which are server ready. Enjoy!!
Do you want to improve it? Sounds cool. Please drop me a line at email@example.com