Helping you bootstrap your web site/app using a Grunt & Node.js stack
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:
- 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.
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.
UnderTasker can do everything at once, or just certain tasks.
- grunt build-less
Only compiles, autoprefixes, and minifies the CSS.
- grunt build-js
- grunt build-img
Attempts to optimize any JPG/PNG images in src/img.
- grunt build
- grunt dist
- grunt deploy
The same as grunt build, but also deploys your _site directory and compiled assets.
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
│ ├─ img/
│ ├─ js/
│ └─ css/
│ ├─ dist/
│ └─ index.html
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.
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.
UnderTasker is released under the MIT License.