Bake Tasks
Task extensions for bake(1).
Prerequisites
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:
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
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.