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 generate production ready static assets from their source files, as well as quickly publish sites to Github Pages. Think of it as a sort of swiss army knife for your websites.
Out of the box, UnderTasker uses the following:
- CSS Autoprefixer
- gulp-imagemin (For image optimizations)
- gulp-deploy-git (For git deployment)
- gulp-gh-pages (Deploy easily to Github)
- Jekyll (For compiling html)
If there’s a Gulp plugin, you can (probably) 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 gulp command.
UnderTasker requires Yarn to be installed. Consult the Yarn site for installation directions on your platform.
yarn installfor dependencies (list located in package.json. This might take a little while.
gulp installto copy over framework dependencies, such as Bootstrap and Font Awesome to your jekyll build.
- By default, your static assets will be called site.extension (site.css, site.js, etc).
- If you plan on deploying the site with git, make sure you update
gulpfile.jswith the correct location.
If Using Jekyll:
- If necessary, install Jekyll (requires v2.1.x).
- From the root /undertasker directory, run
yarn startin the command line.
- Visit http://localhost:9005 in your browser.
- By default,
yarn startwill use browserSync to run the jekyll build command and reload the page whenever any html changes are detected.
All of your work will mostly be done in the source directory. All files from source 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 source/site, the directory used for publishing to Github Pages. Gulp will clean up and repopulate files in the dist directories as necessary whenever commands are issued.
├─ source/ │ ├─ img/ │ ├─ js/ │ ├─ sass/ │ └─ site/ │ └─ dist/ │ └─ index.html ├─ dist/ │ ├─ img/ │ ├─ js/ │ └─ css/ ├─ .publish/ │ ├─ dist/ │ └─ index.html ├─ _config.yml ├─ gulpfile.js ├─ Gemfile ├─ yarn.lock └─ package.json
Just about everything happens in gulpfile.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.
Bare minimal css elements from Bootstrap (in the form of SCSS) are also included to help you get started. These files are in no way required and can be deleted or edited however you want.
UnderTasker can do everything at once, or just certain tasks:
gulp installCopies over frameworks/dependencies from node_modules. This should typically only ever be used at the start of setting up a project.
yarn brewConverts coffeescript files inside source/coffee to source/js/app.js.
gulp build-cssCompiles, autoprefixes, and minifies the CSS.
gulp build-jsMinimizes and uglifies everything in the js directory into a single file (including site.js).
yarn imagesAttempts to optimize any JPG/PNG/GIF images in source/img.
yarn githubAttempts to build all assets deploys to your project's Github Page.
yarn s3Attempts to build all assets deploys to your project's AWS S3 Bucket (Does not invalidate Cloudfront cache).
yarn cleanCleans out (deletes) the dist folders.
yarn jekyllRuns jekyll and builds the site into .publish.
yarn watchWatches for any CSS/JS/HTML changes, and reloads the browser accordingly.
UnderTasker can be used for a few different things. If you're looking to use it to develop a static website, you just need to run
If you're not interested in compiling the HTML,
gulp watch will act similar, and update CSS/JS accordingly. If you're looking to use this as a way to build/minify static files to use with your web app, it also has you covered. Just run
gulp build and all of your compiled, minified and uglified static files can be found in
To see it in action, visit the UnderTasker site. To view the source, or to clone the git repo, check out https://github.com/underlost/UnderTasker. I also built tyler.codes (source) and underlost.net (source) with UnderTasker. I continue to use UnderTasker for various client projects as well.
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 beyond what's written in these docs. Your best bet is to first go read up on Gulp. If you believe you’ve encountered a bug, feel free to open an issue on Github.
For updates and changes to this project, please refer to changelog.md.
Roadmap & Features Requests
UnderTasker is built as is, for my use. Feature requests will be considered, but if you'd like to make any changes or add new features, I'd suggest just forking the repo.
That being said, below are some of the updates that I'll be focusing on for future releases:
- Better AWS support, including invalidating Cloudfront caches.
- Heroku Support
- WordPress/CMS integrations. Often times I'll modify UnderTasker to work with WordPress theme development. I'd like to eventually modify the UnderTasker workflow to generate a gulpfile.js and directory structure based on project type.
UnderTasker is released under the MIT License.