Node.JS provides a powerful platform for programming the generation of static HTML files. This site is the result of an example build system.
Source Code Birds-eye
Features
Currently Supported Features
This project breaks up source files across the three major divisions of modern Web development:
- Scripts,
- Styles,
- and Markup
Scripts
- Grunt-powered linting with JShint
- Grunt-powered minification with UglifyJS
- Grunt managed assets provide vendor, development, and production scripts (yay automated copying)
- Asynchronously loaded in the browser with yepnope
Styles
- Stylus preprocessing language
- Includes both Fluidity & Axis Frameworks
- Design adapted from LESS snippet for Solarized syntax highlighting color scheme.
- Responsive Grid setup with variable breakpoints.
- Currently using Fluidity's semantic grid system
- Roots / Axis offers the Semantic Grid System
- Can use vanilla CSS alongside Stylus
Markup
- HTML5 Boilerplate inspired template
- Extensive use of Jade
- Locals module can provide helpers & is tested
- Exposes local helpers as mixins when possible
- Can inline JavaScript files configured by build type
- Works with Markdown via Marked
- Generates syntax-highlighted source code as HTML with Pygments, then templates with Jade
This included markdown file lives at /docs/features.html and /src/markup/htdocs/docs/features.markdown.
Other Stuff in the Works
Behind this HTML, CSS, and JS veneer there's quite a bit going on. It'd be nice to take some of my logic and put together some grunt plugin(s).
Potential Grunt Tasks:
- Jade One-to-Many
- Compiles one source template with different data to different destinations
- Pygments
- Provide a multitask wrapper to syntax highlight for the Web
- Markdown
- Because a proper simple multitask is yet to exist
Also, now up & running, is a test suite for the build processes. Mocha, Should, and Sinon test my Gruntfile and Jade Locals module to ensure proper compilation of files.
The tests are written in CoffeeScript for gorgeous syntax and legibility, then compiled side by side to JavaScript. The results of these tests are publicly available on Travis.CI. The build status is now:
It'd be nice to get Jasmine going for client-side code coverage.
This included markdown file lives at /docs/addendum.html and /src/markup/htdocs/docs/addendum.markdown.