NOTE: UnderTasker is no longer being developed.
I built UnderTasker to help assist in developing and testing websites. More specifically, I wrote it to help develop underlost.net and A Life Well Played, but have since used it for other projects. It’s mainly designed to help you generate production ready static assets from their source files, as well as quickly publish sites to Github Pages.
Out of the box, UnderTasker uses the following:
- JSLint/CSSLint
- UglifyJS
- LESS
- CSS Autoprefixer
- grunt-contrib-imagemin (For image optimizations)
- grunt-git-deploy (For git deployment)
- Jekyll (For compiling html)
If there’s a grunt plugin, you can use it with UnderTasker. Add, remove, and extend to your heart’s content. When you're finished, you can even publish your static site to Github Pages with a single grunt command.
Getting Started
UnderTasker requires Node.js to be installed. Consult the Node.js site for installation directions on your platform.
- Run ‘npm install -g grunt-cli’ if you do not yet have the grunt CLI installed.
- Run ‘npm install’ for remaining dependencies (list located in packages.json. This might take a little while.
- By default, your static assets will be called under-runner.extension (under-tasker.css, under-tasker.js, etc). Rename the slug field in package.json to whatever you want your static assets to be named.
- If you plan on using Undertasker for deploying a static site, you will want to install Jekyll.
- If you plan on deploying the site with git, make sure you specify the .git url in package.json.
If developing locally:
- If necessary, install Jekyll (requires v2.1.x).
- From the root /undertasker directory, run jekyll serve in the command line.
- Visit http://localhost:9005 in your browser.
Commands
UnderTasker can do everything at once, or just certain tasks.
- grunt build-less
Only compiles, autoprefixes, and minifies the CSS. - grunt build-js
Compiles coffeescript to coffee.js, then minifies and uglifies any additional javascript mentioned in grunt.coffee. - grunt build-img
Attempts to optimize any JPG/PNG images in src/img. - grunt build
Build all static assets from src, including less, coffeescript and javascript, as well as tries to optimize any JPG/PNG files in src/img. Also sets up the gh-pages directory. - grunt dist
Similar to grunt build, but does not run any tasks related to html. Only static assets in the dist directory are generated, including css, javascript and optimized images. Useful if you’re using the assets for a non static website. - grunt deploy
The same as grunt build, but also deploys your _site directory and compiled assets.
What’s Included
All of your work will mostly be done in the src directory. All files from src (except the site directory) will be compiled and copies to the dist directory upon running the specified commands in the next section. Files in the dist directory will be production ready. That is, they will be compiled, minified, and ready to deployed to the web. The compiled dist directory will also be copied to src/site, the directory used for publishing to Github Pages. Grunt will clean up and repopulate files in the dist directories as necessary whenever commands are issued.├─ src/
│ ├─ img/
│ ├─ js/
│ ├─ less/
│ └─ site/
│ └─ dist/
│ └─ index.html
├─ dist/
│ ├─ img/
│ ├─ js/
│ └─ css/
├─ _gh-pages/
│ ├─ dist/
│ └─ index.html
├─ _config.yml
├─ grunt/
├─ Gruntfile.js
└─ package.json
Just about everything happens in Gruntfile.js. If you want to make modifications to the workflow, you’ll probably want to edit that. If you're working with a static site, as previously mentioned, package.json contains several variables you might want to change to better suit the naming conventions of your files, as well as the url to the github repo you might want to deploy your site to.
Bare minimal css elements from Bootstrap (in the form of LESS) are also included to help you get started. These files are in no way required and can be deleted or edited however you want.
Example
To see it in action, visit the UnderTasker site. I also built tyler.codes and underlost.net with it. To view the source, or to clone the git repo, check out https://github.com/underlost/UnderTasker.
Support
If you're not sure what this is, it’s probably not for you. UnderTasker is provided as is, and I can not assist in helping you get it setup. Your best bet is to first go read up on Grunt, then come back here. If you believe you’ve encountered a bug, feel free to open an issue on Github.
License
UnderTasker is released under the MIT License.