spa-hero : Automating build for single page apps

Standard

spa-hero

Create production/dev ready distribution build for javascript based single page applications. spa-hero uses gulp-useref to read out the html file and copy third party dependencies to a separate library folder.

Why I wrote this?

In this modern era of web, we extensivly use npm or bower to download dependencies to our project. These dependencies are right there in our project folder including lots of other files that came in with these packages. After looking at the size of my project one unavoidable question comes to us ,how to upload my project on server? Do I have to pick each and every javascript/css files from node_modules/bower_component folder and maintain a new folder which can be uploaded to server? If yes, then what happen when I added or removed some dependencies and I have to repeat the same cycle? Awww.

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.

Version

1.0.0

Dependencies

spa depends on some very cool nodejs modules available which help spa to generate build files.

Major modules are as follows:

  • gulp
  • gulp-useref

Features

  • Support files minification for prod and left file untouched for dev.
  • maintain a separate directory for our distribution.
  • Can choose source and destination folders.

Installation

npm install spa-hero

Options

Commands:

  • build-dev (we choose this command when we dont want spa to concat and minify our files.)
  • build-prod (for production use)

Parameters

  • -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)

try

spa --help

Usages

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

OR

spa build-prod -h app -a app -d dist

Command Demo

alt text

Sample project structure.

alt text

And this is what we got after spa-hero take charge:

alt text

You will see a new directry called dist with all of your files which are server ready. Enjoy!!

Contribute

Do you want to improve it? Sounds cool. Please drop me a line at mail.goyalshubham@gmail.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s