NodeAtlas —The Progressive Server-side JavaScript Framework

Tools Part

Minify CSS / JS

You can automatically generate CSS and JS files minified and obfuscated by creating bundles by referencing the file by input and output path. Of course you can do as much as you want. The generation files is executed every time you start NodeAtlas either as a server or via the --generate command if a bundle exists in the webconfig.

Creating Bundles

With the following configuration:

{
    "bundles": {
        "javascripts": {
            "javascripts/boot.min.js": [
                "javascripts/modernizr.js",
                "javascripts/yepnot.js",
                "javascripts/html5Shiv.js"
            ],
            "javascripts/framework.min.js": [
                "javascripts/jquery.js",
                "javascripts/jquery-ui.js",
                "javascripts/prettify.js",
                "javascripts/prettify/run_prettify.js"
            ],
            "javascripts/common.min.js": [
                "javascripts/components/extended-format-date.js",
                "javascripts/common.js"
            ]
        },
        "stylesheets": {
            "stylesheets/common.min.css": [
                "stylesheets/common.css",
                "stylesheets/common-min780.css",
                "stylesheets/common-min1160.css"
            ]
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

and the following set of file:

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  └─ common-min1160.css
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     └─ common.js
├─ views/
│  └─ index.htm
└─ webconfig.json

you will get the following new files:

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  ├─ common-min1160.css
│  │  └─ common.min.css     ⤆ new file
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     ├─ common.js
│     ├─ boot.min.js        ⤆ new file
│     ├─ framework.min.js   ⤆ new file
│     └─ common.min.js      ⤆ new file
├─ views/
│  └─ index.htm
└─ webconfig.json

Bundles in a shared file

In order to not re-write a long Bundles configuration list in webconfig.json file to your development environment an webconfig.prod.json to your production environment, you can group routes in a file of your choice. By convention, the name is bundles.json file.

For example,

The following set of file:

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  └─ common-min1160.css
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     └─ common.js
├─ views/
│  └─ index.htm
├─ webconfig.json
└─ webconfig.prod.json

with webconfig.json:

{
    "httpPort": 7777,
    "bundles": {
        "javascripts": {
            "javascripts/boot.min.js": [
                "javascripts/modernizr.js",
                "javascripts/yepnot.js",
                "javascripts/html5Shiv.js"
            ],
            "javascripts/framework.min.js": [
                "javascripts/jquery.js",
                "javascripts/jquery-ui.js",
                "javascripts/prettify.js",
                "javascripts/prettify/run_prettify.js"
            ],
            "javascripts/common.min.js": [
                "javascripts/components/extended-format-date.js",
                "javascripts/common.js"
            ]
        },
        "stylesheets": {
            "stylesheets/common.min.css": [
                "stylesheets/common.css",
                "stylesheets/common-min780.css",
                "stylesheets/common-min1160.css"
            ]
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

and with webconfig.prod.json:

{
    "httpPort": 7776,
    "httpHostname": "blog.lesieur.name",
    "urlPort": 80,
    "bundles": {
        "javascripts": {
            "javascripts/boot.min.js": [
                "javascripts/modernizr.js",
                "javascripts/yepnot.js",
                "javascripts/html5Shiv.js"
            ],
            "javascripts/framework.min.js": [
                "javascripts/jquery.js",
                "javascripts/jquery-ui.js",
                "javascripts/prettify.js",
                "javascripts/prettify/run_prettify.js"
            ],
            "javascripts/common.min.js": [
                "javascripts/components/extended-format-date.js",
                "javascripts/common.js"
            ]
        },
        "stylesheets": {
            "stylesheets/common.min.css": [
                "stylesheets/common.css",
                "stylesheets/common-min780.css",
                "stylesheets/common-min1160.css"
            ]
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

could be the following set of file:

├─ assets/
│  ├─ stylesheets/
│  │  ├─ common.css
│  │  ├─ common-min780.css
│  │  └─ common-min1160.css
│  └─ javascripts/
│     ├─ modernizr.js
│     ├─ yepnot.js
│     ├─ html5Shiv.js
│     ├─ jquery.js
│     ├─ jquery-ui.js
│     ├─ prettify.js
│     ├─ prettify/
│     │  └─ run_prettify.js
│     ├─ components/
│     │  └─ extended-format-date.js
│     └─ common.js
├─ views/
│  └─ index.htm
├─ bundles.json              ⤆ new file
├─ webconfig.json
└─ webconfig.prod.json

with webconfig.json:

{
    "httpPort": 7777,
    "bundles": "bundles.json",
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

with webconfig.prod.json:

{
    "httpPort": 7776,
    "httpHostname": "blog.lesieur.name",
    "urlPort": 80,
    "bundles": "bundles.json",
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

and bundles.json:

{
    "javascripts": {
        "javascripts/boot.min.js": [
            "javascripts/modernizr.js",
            "javascripts/yepnot.js",
            "javascripts/html5Shiv.js"
        ],
        "javascripts/framework.min.js": [
            "javascripts/jquery.js",
            "javascripts/jquery-ui.js",
            "javascripts/prettify.js",
            "javascripts/prettify/run_prettify.js"
        ],
        "javascripts/common.min.js": [
            "javascripts/components/extended-format-date.js",
            "javascripts/common.js"
        ]
    },
    "stylesheets": {
        "stylesheets/common.min.css": [
            "stylesheets/common.css",
            "stylesheets/common-min780.css",
            "stylesheets/common-min1160.css"
        ]
    }
}

Note : it is possible to disable bundles by not including them in the webconfig.

Disable Bundles

It is also possible to not execute the minification when run a website with NodeAtlas with "cssBundlingEnable": false et "jsBundlingEnable": false for each type of bundle.

{
    "cssBundlingEnable": false,
    "jsBundlingEnable": false,
    "bundles": {
        "javascripts": {
            "javascripts/boot.min.js": [
                "javascripts/modernizr.js",
                "javascripts/yepnot.js",
                "javascripts/html5Shiv.js"
            ],
            "javascripts/framework.min.js": [
                "javascripts/jquery.js",
                "javascripts/jquery-ui.js",
                "javascripts/prettify.js",
                "javascripts/prettify/run_prettify.js"
            ],
            "javascripts/common.min.js": [
                "javascripts/components/extended-format-date.js",
                "javascripts/common.js"
            ]
        },
        "stylesheets": {
            "stylesheets/common.min.css": [
                "stylesheets/common.css",
                "stylesheets/common-min780.css",
                "stylesheets/common-min1160.css"
            ]
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

Note : if your bundle is in shared file, you could desactivated it also without the "bundles": "bundles.json". Just remove it.

Regenerate Bundles before each Page Response

For test your page with minified files, you can ask it to be regenerated before each page response with "cssBundlingBeforeResponse": false et "jsBundlingBeforeResponse": false for each type of bundle.

{
    "cssBundlingBeforeResponse": false,
    "jsBundlingBeforeResponse": false,
    "bundles": {
        "javascripts": {
            "javascripts/boot.min.js": [
                "javascripts/modernizr.js",
                "javascripts/yepnot.js",
                "javascripts/html5Shiv.js"
            ],
            "javascripts/framework.min.js": [
                "javascripts/jquery.js",
                "javascripts/jquery-ui.js",
                "javascripts/prettify.js",
                "javascripts/prettify/run_prettify.js"
            ],
            "javascripts/common.min.js": [
                "javascripts/components/extended-format-date.js",
                "javascripts/common.js"
            ]
        },
        "stylesheets": {
            "stylesheets/common.min.css": [
                "stylesheets/common.css",
                "stylesheets/common-min780.css",
                "stylesheets/common-min1160.css"
            ]
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

Note : this is not recommanded for production environment because it's slowed responses pages.

Version into generate file names

In order to force the browser to force reload new versions of files in the cache, it's an interesting feature to be capable to change the name file for each version. And the {version} pattern will be replaced by the version number of your website (0.0.0 by default).

So, if you have a package.json or a webconfig.json valid file with a version number into the version property, this number will replace the {version} pattern. With the following webconfig:

webconfig

{
    "version": "1.0.0",
    "bundles": "bundles.json"
    "routes": "routes.json"
}

and the following bundles:

bundles.json

{
    "javascripts": {
        "javascripts/boot.{version}.min.js": [
            "javascripts/modernizr.js",
            "javascripts/yepnot.js",
            "javascripts/html5Shiv.js"
        ]
    },
    "stylesheets": {
        "stylesheets/common.{version}.min.css": [
            "stylesheets/common.css",
            "stylesheets/common-min780.css",
            "stylesheets/common-min1160.css"
        ]
    }
}

you will get files assets/javascripts/boot.1.0.0.min.js and assets/javascripts/common.1.0.0.min.css.

And you will be able to request them as following:

views/*.htm

<!-- ... -->

<link rel="stylesheet" href="stylesheets/common.<?= webconfig.version ?>.min.css">

<!-- ... -->

<script src="javascripts/boot.<?= webconfig.version ?>.min.js"></script>

<!-- ... -->

Bundles with WebSockets

It's possible to minify file defined in NA.webconfig.socketClientFile even if it's not a real physical file. Just add it into bundles of your choice.

In the following example, virtual /node-atlas/socket.io.js file will be added to bundles with the correct client/server sockets configuration.

{
    "bundles": {
        "javascripts": {
            "javascripts/common.min.js": [
                "javascripts/socket.io.js",
                "node-atlas/socket.io.js",
                "javascripts/common.js"
            ]
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

CSS generation with Less

You can use the preprocessor Less to create your CSS. The operation is as follows: whenever a CSS request is made, if a Less equivalent exists it is read and it generates the CSS. Once done, the new CSS is responded.

With the following structure:

├─ assets/
│  └─ stylesheets
│     └─ common.less
├─ views/
│  └─ index.htm
└─ webconfig.json

and the following webconfig:

{
    "less": true,
    "routes": {
        "/": "index.htm"
    }
}

and the following content in:

views/index.htm

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Less Test</title>
        <link rel="stylesheet" href="stylesheets/common.css">
    </head>
    <body>
        <p>This line is red.</p>
    </body>
</html>

assets/stylesheets/common.less

p {
    color: #f00;
}

you will build the assets/stylesheets/common.css by calling the URL http://localhost/ or http://localhost/stylesheets/common.css.

Source Map, Minification and Autoprefix

By default, in the above example, a common.css.map file will be generated. This allows your browser to indicated you that line in the .less file has generated the CSS property of the item you have selected in your debugger.

Disable this with less.sourceMap to false:

    "less": {
        "sourceMap": false
    },
    "routes": {
        "/": "index.htm"
    }

You can also generate CSS files already minify with:

    "less": {
        "compress": true
    },
    "routes": {
        "/": "index.htm"
    }

Finally, you can also automaticly add vendor prefix like --webkit, --moz, --ms, --o for generated file without care about it in your sources files!

    "less": {
        "autoprefix": true
    },
    "routes": {
        "/": "index.htm"
    }

Compile Less files with `--generate`

Because of Less files are compilated on the fly, when a file is requested in HTTP(S), modification needed the running website for generating CSS output. Then you can use CSS. It's possible to skip running step and directly compilated Less before minifying CSS with less.files.

With the following webconfig.json:

{
    "less": {
        "files": [
            "stylesheets/common.less",
            "stylesheets/component-1.less",
            "stylesheets/component-2.less",
            "stylesheets/component-3.less"
        ]
    },
    "routes": {
        "/": "index.htm"
    }
}

or with the following webconfig.json:

{
    "less": {
        "files": "less.json"
    },
    "routes": {
        "/": "index.htm"
    }
}

with less.json containing:

[
    "stylesheets/common.less",
    "stylesheets/component-1.less",
    "stylesheets/component-2.less",
    "stylesheets/component-3.less"
]

The @import used by Less will be capable to walk into subdirectories: styles, stylesheets or css. It's possible to change that with :

{
    "less": {
        "paths": [
            "subdirectory/styles-files",
        ],
        "files": "less.json"
    },
    "routes": {
        "/": "index.htm"
    }
}

CSS generation with Stylus

You can use the preprocessor Stylus to create your CSS. The operation is as follows: whenever a CSS request is made, if a Stylus equivalent exists it is read and it generates the CSS. Once done, the new CSS is responded.

With the following structure:

├─ assets/
│  └─ stylesheets
│     └─ common.styl
├─ views/
│  └─ index.htm
└─ webconfig.json

and the following webconfig:

{
    "stylus": true,
    "routes": {
        "/": "index.htm"
    }
}

and the following content in:

views/index.htm

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Stylus Test</title>
        <link rel="stylesheet" href="stylesheets/common.css">
    </head>
    <body>
        <p>This line is red.</p>
    </body>
</html>

assets/stylesheets/common.styl

p
    color: #f00

you will build the assets/stylesheets/common.css by calling the URL http://localhost/ or http://localhost/stylesheets/common.css.

Source Map, Minification and Autoprefix

By default, in the above example, a common.css.map file will be generated. This allows your browser to indicated you that line in .styl file has generated the CSS property of the item you have selected in your debugger.

Disable this with stylus.sourceMap to false:

    "stylus": {
        "sourceMap": false
    },
    "routes": {
        "/": "index.htm"
    }

You can also generate CSS files already minify with:

    "stylus": {
        "compress": true
    },
    "routes": {
        "/": "index.htm"
    }

Finally, you can also automaticly add vendor prefix like --webkit, --moz, --ms, --o for generated file without care about it in your sources files!

    "stylus": {
        "autoprefix": true
    },
    "routes": {
        "/": "index.htm"
    }

Note: More options on Stylus documentation for module.

Compile Stylus files with `--generate`

Because of Stylus are compilated on the fly, when a file is requested in HTTP(S), modification needed running websites for generating CSS output. Then you can use CSS. It's possible to skip running step and directly compilated Stylus before minifying CSS with stylus.files.

With the following webconfig.json:

{
    "stylus": {
        "files": [
            "stylesheets/common.styl",
            "stylesheets/component-1.styl",
            "stylesheets/component-2.styl",
            "stylesheets/component-3.styl"
        ]
    },
    "routes": {
        "/": "index.htm"
    }
}

or with the following webconfig.json:

{
    "stylus": {
        "files": "stylus.json"
    },
    "routes": {
        "/": "index.htm"
    }
}

with stylus.json containing :

[
    "stylesheets/common.styl",
    "stylesheets/component-1.styl",
    "stylesheets/component-2.styl",
    "stylesheets/component-3.styl"
]

The @import used by Stylus will be capable to walk into subdirectories : styles, stylesheets or css. It's possible to change that with :

{
    "stylus": {
        "paths": [
            "subdirectory/styles-files",
        ],
        "stylus": "stylus.json"
    },
    "routes": {
        "/": "index.htm"
    }
}

Optimize Images Files (Removed from v2.0.2+)

This feature does not exist anymore from v2.0.2. The v2.0.1 is the same as this one but with this additional feature. The next versions will not include this dependencies that suffer of vulnerabilities and badly maintained. You can chose others tools to do greatly the job.

You can automatically generate optimized images files by creating Optimizations by referencing the file by input and output path. Of course, you can do as much as you want. The optimization files is executed every time you start NodeAtlas either as a server or via the --generate command if an Optimization exists in the webconfig.

Creating Optimizations

With the following configuration:

{
    "optimizations": {
        "images": {
            "media/images/example.png": "media/images/optimized/",
            "media/images/example.jpg": "media/images/optimized/",
            "media/images/example.gif": "media/images/optimized/",
            "media/images/example.svg": "media/images/optimized/"
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

and the following set of file:

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        └─ example.svg
├─ views/
│  └─ index.htm
└─ webconfig.json

you will get the following new files:

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        ├─ example.svg
│        └─ optimized/       ⤆ new folder
│           ├─ example.png   ⤆ new file
│           ├─ example.jpg   ⤆ new file
│           ├─ example.gif   ⤆ new file
│           └─ example.svg   ⤆ new file
├─ views/
│  └─ index.htm
└─ webconfig.json

Create Optimizations by group of file

For example, not define file one by one, but in group:

{
    "optimizations": {
        "images": {
            "media/images/*.{gif,jpg,png,svg}": "media/images/optimized/"
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

Add more options to optimizations

It is possible to redefine default options used for optimizations via this 4 objects:

{
    "optimizations": {
        "jpg": { "progressive": false },
        "gif": { "interlaced": false },
        "png": { "optimizationLevel": 1 },
        "svg": { "multipass": false },
        "images": {
            "media/images/*.{gif,jpg,png,svg}": "media/images/optimized/"
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

To know all options it is here:

Optimizations in a shared file

In order to not re-write a long bundle configuration list in webconfig.json file to your development environment and webconfig.prod.json to your production environment, you can group files in a file of your choice. By convention, the name is optimizations.json file.

For example,

The following set of file:

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        └─ example.svg
├─ views/
│  └─ index.htm
├─ webconfig.json
└─ webconfig.prod.json

with webconfig.json

{
    "httpPort": 7777,
    "optimizations": {
        "images": {
            "media/images/example.png": "media/images/optimized/",
            "media/images/example.jpg": "media/images/optimized/",
            "media/images/example.gif": "media/images/optimized/",
            "media/images/example.svg": "media/images/optimized/"
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

and with webconfig.prod.json:

{
    "httpPort": 7776,
    "httpHostname": "blog.lesieur.name",
    "urlPort": 80,
    "optimizations": {
        "images": {
            "media/images/example.png": "media/images/optimized/",
            "media/images/example.jpg": "media/images/optimized/",
            "media/images/example.gif": "media/images/optimized/",
            "media/images/example.svg": "media/images/optimized/"
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

could be the following set of file:

├─ assets/
│  └─ media/
│     └─ images/
│        ├─ example.png
│        ├─ example.jpg
│        ├─ example.gif
│        └─ example.svg
├─ views/
│  └─ index.htm
├─ bundles.json
├─ webconfig.json
└─ webconfig.prod.json

with webconfig.json:

{
    "httpPort": 7777,
    "optimizations": "optimizations.json",
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

with webconfig.prod.json:

{
    "httpPort": 7776,
    "httpHostname": "blog.lesieur.name",
    "urlPort": 80,
    "optimizations": "optimizations.json",
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

and optimizations.json:

{
    "images": {
        "media/images/example.png": "media/images/optimized/",
        "media/images/example.jpg": "media/images/optimized/",
        "media/images/example.gif": "media/images/optimized/",
        "media/images/example.svg": "media/images/optimized/"
    }
}

Note: it is possible to disable Optimizations by not including them in the webconfig.

Disable Optimizations

It is also possible to not execute the optimization when running a website with NodeAtlas with "imgOptimizationsEnable": false.

{
    "imgOptimizationsEnable": false,
    "optimizations": {
        "images": {
            "media/images/example.png": "media/images/optimized/",
            "media/images/example.jpg": "media/images/optimized/",
            "media/images/example.gif": "media/images/optimized/",
            "media/images/example.svg": "media/images/optimized/"
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

Note : if your optimizations is in shared file, you could desactivated it also without the "optimizations": "optimizations.json". Just remove it.

Re-generate Optimizations before each Page Response

You can ask files to be regenerated before each page response with "cssBundlingBeforeResponse": false et "jsBundlingBeforeResponse": false for each type of Bundle.

{
    "imgOptimizationsBeforeResponse": false,
    "optimizations": {
        "images": {
            "media/images/example.png": "media/images/optimized/",
            "media/images/example.jpg": "media/images/optimized/",
            "media/images/example.gif": "media/images/optimized/",
            "media/images/example.svg": "media/images/optimized/"
        }
    },
    "routes": {
        "/": {
            "view": "index.htm"
        }
    }
}

Note : this is not recommanded for production environment because it's slowed responses pages.

CSS Inline Injection

When you create templates for sending email newsletters or even simple message, you can not attach stylesheet. The only way is to write the CSS instructions in the template within the style markup attribute.

Specific Injection

With injectCss, simply design your template as usual via a stylesheet and NodeAtlas inject each rendering styles in the attribute style. It will do more than generate templates.

With for example the following configuration:

{
    "routes": {
        "/": {
            "view": "email.htm",
            "output": "welcome.html",
            "injectCss": "stylesheets/email.css"
        }
    }
}

and the following set of files:

├─ serverless/
├─ assets/
│  └─ stylesheets/
│     └─ email.css
├─ views/
│  └─ email.htm
└─ webconfig.json

whose contents are :

stylesheets/common.css

body {
    color: #f00;
}

views/email.htm

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Email</title>
    </head>
    <body>
        <p>This is a template email.</p>
    </body>
</html>

output will be, with the command node-atlas --generate, all following file:

├─ serverless/
│  └─ bienvenue.html    <= template email generate !
├─ assets/
│  └─ stylesheets/
│     └─ email.css
├─ views/
│  └─ email.htm
└─ webconfig.json

with as content for serverless/welcome.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Email</title>
    </head>
    <body style="color: #f00;">
        <p>This is a template email.</p>
    </body>
</html>

This mechanism also works if you do not intend to generate anything but a site that is running. Convenient to change your live models before generating.

Global Injection

It is possible to use injectCss as global mechanism for all pages.

{
    "injectCss": "stylesheets/email.css",
    "routes": {
        "/welcome/": {
            "view": "email-a.htm",
            "output": "welcome.html"
        },
        "/good-bye/": {
            "view": "email-b.htm",
            "output": "good-bye.html"
        }
    }
}

also the two pages welcome and good-bye will contain each <body style="color: #f00;">.

Multiple Injection

It's possible:

to attach global and specific files in same time,
to attach more one CSS file by injectCss property.

{
    "injectCss": ["stylesheets/reset.css", "stylesheets/email.css"],
    "routes": {
        "/welcome/": {
            "view": "email-a.htm",
            "output": "welcome.html",
            "injectCss": "/stylesheets/welcome.css"
        },
        "/good-bye/": {
            "view": "email-b.htm",
            "output": "good-bye.html",
            "injectCss": ["stylesheets/good-bye.css", "/stylesheets/others.css"]
        }
    }
}

◄ Controller Part

Advanced Part ►

Simple set-up

Scalable website

Agnostic client side

Tools Part

Minify CSS / JS

Creating Bundles

Bundles in a shared file

Disable Bundles

Regenerate Bundles before each Page Response

Version into generate file names

Bundles with WebSockets

CSS generation with Less

Source Map, Minification and Autoprefix

Compile Less files with `--generate`

CSS generation with Stylus

Source Map, Minification and Autoprefix

Compile Stylus files with `--generate`

Optimize Images Files (Removed from v2.0.2+)

Creating Optimizations

Create Optimizations by group of file

Add more options to optimizations

Optimizations in a shared file

Disable Optimizations

Re-generate Optimizations before each Page Response

CSS Inline Injection

Specific Injection

Global Injection

Multiple Injection

Tools Part

Minify CSS / JS

Creating Bundles

Bundles in a shared file

Disable Bundles

Regenerate Bundles before each Page Response

Version into generate file names

Bundles with WebSockets

CSS generation with Less

Source Map, Minification and Autoprefix

Compile Less files with --generate

CSS generation with Stylus

Source Map, Minification and Autoprefix

Compile Stylus files with --generate

Optimize Images Files (Removed from v2.0.2+)

Creating Optimizations

Create Optimizations by group of file

Add more options to optimizations

Optimizations in a shared file

Disable Optimizations

Re-generate Optimizations before each Page Response

CSS Inline Injection

Specific Injection

Global Injection

Multiple Injection

Compile Less files with `--generate`

Compile Stylus files with `--generate`