1 | # ASPA
|
2 | ASPA is a simple web application asset packager for Node.js.
|
3 |
|
4 | Make sure to check [ASPA-Express](https://github.com/icflorescu/aspa-express) for using packaged assets in [Express](http://expressjs.com) webapps.
|
5 |
|
6 | ![ASPA](https://raw.github.com/icflorescu/aspa/master/aspa.png)
|
7 |
|
8 | ## Features
|
9 |
|
10 | * Map-file based (asset map uses a subset of [YAML](http://en.wikipedia.org/wiki/YAML) syntax);
|
11 | * Accepts .css and .styl input for stylesheets;
|
12 | * Accepts .js, .coffee and .iced ([IcedCoffeeScript](http://maxtaco.github.com/coffee-script/)) input for scripts;
|
13 | * Concatenates multiple script/style source files per output file;
|
14 | * [Fingerprints](http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care) and gzips assets in production mode.
|
15 |
|
16 | ## Installation
|
17 |
|
18 | npm install aspa
|
19 |
|
20 | ## Usage
|
21 |
|
22 | I. **Keep your asset files in a separate folder** outside your main web application directory.
|
23 |
|
24 | **Warning: _Don't put anything directly in the public web folder, as it will be overwritten during the build process!_**
|
25 |
|
26 | Sample folder structure:
|
27 |
|
28 | /work/server -> web application root folder
|
29 | /work/server/public -> publicly-visible folder
|
30 |
|
31 | /work/client -> root of the asset folder
|
32 | /work/client/lib -> various libraries, such as...
|
33 | /work/client/lib/select2 -> ...select2
|
34 | /work/client/templates -> client-side jade templates
|
35 | /work/client/scripts -> script files
|
36 | /work/client/styles -> styleheet files
|
37 |
|
38 | II. **Create aspa.yml map file** in the root of the asset folder (`/work/client` in the example above), describing the structure of your deployment.
|
39 |
|
40 | Sample aspa.yml file (syntax should be quite self-explanatory):
|
41 |
|
42 | js/main.js:
|
43 | from:
|
44 | lib/underscore.js : ~
|
45 | lib/backbone.js : ~
|
46 | lib/select2.js : ~
|
47 | lib/jade-runtime.js : ~
|
48 | scripts/jst-namespace.coffee : { bare: true }
|
49 | templates/item.jade : ~
|
50 | templates/collection.jade : ~
|
51 | scripts/main.coffee : ~
|
52 |
|
53 | css/main.css:
|
54 | from:
|
55 | lib/fontello/css/fontello.css : ~
|
56 | styles/main.styl : { nib: true }
|
57 | styles/item.styl : { skip: true }
|
58 |
|
59 | fonts/fontello.eot : { from: lib/fontello/font }
|
60 | fonts/fontello.svg : { from: lib/fontello/font, compress: true }
|
61 | fonts/fontello.ttf : { from: lib/fontello/font, compress: true }
|
62 | fonts/fontello.woff : { from: lib/fontello/font }
|
63 | images/sprite.png : ~
|
64 | images/sprite@2x.png : ~
|
65 | favicon.ico : { raw: true }
|
66 |
|
67 | **A few observations**:
|
68 |
|
69 | * `bare: true` means compile that file without the top-level function safety wrapper, see more about this [here](http://coffeescript.org/#usage);
|
70 | * .jade templates are transformed to JavaScript templating functions in JST namespace (i.e. `templates/item.jade` compiles to `JST['templates/item']` function);
|
71 | * `nib: true` refers to [this](http://visionmedia.github.com/nib/);
|
72 | * `skip: true` means don't include that file in the compiled output, just watch it for changes (in the example above, item.styl is dynamically imported into main.styl, so you don't want to include it again but you want to trigger a rebuild when its content changes;
|
73 | * `fonts/fontello.eot: { from: lib/fontello/font }` means copy `/client/lib/fontello/font/fontello.eot` to `/server/public/fonts/fontello.eot`;
|
74 | * .js and .css files are gzipped automatically in production mode, but other "compressible" assets must be explicitely marked with a `compress: true` option;
|
75 | * `raw: true` means don't fingerprint this file in production.
|
76 |
|
77 | III. **Run the aspa utility in the assets root folder** to build and deploy.
|
78 |
|
79 | **During development**:
|
80 |
|
81 | `aspa -r ../server`
|
82 | Build for development, deploying to `../server/public` (/public is the default).
|
83 |
|
84 | `aspa -r ../server -p pub`
|
85 | Build for development, deploying to `../server/pub`.
|
86 |
|
87 | `aspa -r ../server cleanup`
|
88 | Clean-up `../server/public` and `../server/aspa.json`.
|
89 |
|
90 | `aspa -r ../server watch`
|
91 | Watch the asset folder and rebuild automatically when a source file changes. Use this during development.
|
92 |
|
93 | **For production**:
|
94 |
|
95 | `aspa -r ../server -m production`
|
96 | Build for **production**, deploying to `../server/public`.
|
97 |
|
98 | **Note**: Building for production also:
|
99 | * creates an output map named `../server/aspa.json`;
|
100 | * fingerprints generated asset packages (by prefixing them with a UNIX-timestamp string), except the ones marked with `raw: true` in aspa.yml;
|
101 | * compresses .js, .css and any other assets marked with `compress: true` in aspa.yml.
|
102 |
|
103 | Running `aspa -r ../server` in the above context will generate the following output:
|
104 |
|
105 | /work/server/public/js/main.js
|
106 | /work/server/public/css/main.js
|
107 | /work/server/public/fonts/fontello.eot
|
108 | /work/server/public/fonts/fontello.svg
|
109 | /work/server/public/fonts/fontello.ttf
|
110 | /work/server/public/fonts/fontello.woff
|
111 | /work/server/public/images/sprite.png
|
112 | /work/server/public/images/sprite@2x.png
|
113 | /work/server/public/favicon.ico
|
114 |
|
115 | ...while running `aspa -r ../server -m production` could produce this:
|
116 |
|
117 | /work/server/public/js/1361917868718.main.js.gz
|
118 | /work/server/public/css/1361917868718.main.js.gz
|
119 | /work/server/public/fonts/1361917868718.fontello.eot
|
120 | /work/server/public/fonts/1361917868718.fontello.svg.gz
|
121 | /work/server/public/fonts/1361917868718.fontello.ttf.gz
|
122 | /work/server/public/fonts/1361917868718.fontello.woff
|
123 | /work/server/public/images/1361917868718.sprite.png
|
124 | /work/server/public/images/1361917868718.sprite@2x.png
|
125 | /work/server/public/favicon.ico
|
126 | /work/server/aspa.json
|
127 |
|
128 | ## Notes
|
129 |
|
130 | ASPA was written almost entirely in [IcedCoffeeScript](http://maxtaco.github.com/coffee-script/), a superset of CoffeeScript adding `await` and `defer` keywords to simply and powerfully streamline asynchronous control flow.
|
131 |
|
132 | ## License
|
133 |
|
134 | (The MIT License)
|
135 |
|
136 | Copyright (c) 2013 Ionut-Cristian Florescu <ionut.florescu@gmail.com>
|
137 |
|
138 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
139 |
|
140 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
141 |
|
142 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
143 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|