Bake Tasks

Task extensions for bake(1).

Prerequisites

• bash >= 4.2
• node+npm
• sass (requires ruby+gem)

Semantic Versioning

This software is currently under development in the 0.x.x version range and is released using the semver(7) semantic versioning specification.

www-devel

Provides tasks for compiling javascript and css for web applications using requirejs and sass.

Directory Layout

├── r.js -> node_modules/requirejs/bin/r.js
├── server
│   └── public
│       └── assets
│           ├── css
│           └── js
├── src
│   ├── build.js
│   ├── js
│   └── sass
└── target
    └── webapp-build
        └── assets
            ├── css
            └── js

The directory target/webapp-build is used as a staging directory.

Public files for the web application are placed in the server/public/assets directory.

Source sass scss files are placed in src/sass by default.

Source javascript files go in src/js.

Installation

Ensure you have declared dependencies on strike(7), bake-tasks(7) and requirejs in your package.json:

"dependencies": {
	"strike": ">= 0.1.2",
	"bake-tasks": ">= 0.0.1",
	"requirejs": ">= 2.1.3"
}

For existing projects run npm install and create the r.js and bake symlinks:

ln -s node_modules/strike/bin/bake .
ln -s node_modules/requirejs/bin/r.js .

Then in your tasks file you can require these tasks with:

require 'tasks/www-devel';

Or if you are creating a new project you can scaffold the directory layout (and r.js symbolic link) with:

npm install \
	&& ln -sf node_modules/strike/bin/bake . \
	&& echo "require 'tasks/www-devel';" > ./tasks \
	&& ./bake optimize scaffold

Live

The live task uses fswatch to provide continuous optimization for OS X users.

It watches the directories:

• src/js
• src/sass

And invokes the optimize task when filesystem changes are detected.

Note that only a single live task may be run at any one time, a lock file is used to prevent multiple live processes attempting to compile simultaneously and producing spurious output from race conditions during compilation.

Javascript

The js tasks provide commands for working with project javascript files.

js compile

Compiles all javascript files in src using the build file src/build.js.

CSS

The css tasks provide commands for working with source scss files.

css compile

Compiles all the source scss files in src/sass to src/assets/css.

css symlink [theme]

Utility for creating symbolic links for sassy themes.

If no theme name is specified then the default used is solarized.

Symbolic links are created in the directory src/sass/${theme}.

Optimize

optimize scaffold

Creates the required directory layout. All operations are non-destructive so running this on an existing directory with the correct structure is a noop.

The scaffold command performs the following actions:

• Creates the directory layout using mkdir -pv
• Create the symbolic link to r.js
• Copies over a default build.js file
• Creates a default .gitignore

optimize build

The build task compiles all the javascript files in src/js (using r.js) and scss files in the src/sass directory into target/webapp-build and then copies the optimized versions to server/public/assets so that they are available to the web application.

Note that if no command is supplied to the optimize task then build is assumed, the following are equivalent:

./bake optimize
./bake optimize build

The complete list of operations executed by this task is:

• Compile scss to css (using sass)
• Compile source javascript files (using r.js)
• Create compressed versions of compiled files (using gzip)
• Copy compiled versions of the javascript and css versions to the public directory

optimize clean

Remove the temporary target/webapp-build directory if it exists.

optimize compress

Compress .js and .css files in the target/webapp-build/assets directory if it exists.

optimize copy

Copy the js and css directories in the target/webapp-build/assets directory to server/public/assets provided both directories exist.

Roadmap

www-devel

• Allow for custom directory structures using a www-devel.json descriptor
• Add support for compiling less files

Related

• strike
• requirejs
• sass

Example

The vim (documentation browser) repository provides an example of using the www-devel tasks.

License

Everything is MIT. Read the license if you feel inclined.