Giter Club home page Giter Club logo

dependencies Status Build Status

UnderTasker

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:

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.

Getting Started

UnderTasker requires Yarn to be installed. Consult the Yarn site for installation directions on your platform.

  • Run yarn install for dependencies (list located in package.json. This might take a little while.
  • Run gulp install to 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 using UnderTasker for deploying a static site, you will probably want to install something like Jekyll or Jade. 
  • If you plan on deploying the site with git, make sure you update gulpfile.js with the correct location.

If Using Jekyll:

  • If necessary, install Jekyll (requires v2.1.x).
  • From the root /undertasker directory, run jekyll serve in the command line. Or if you're using bundler, bundle exec jekyll serve.
  • Visit http://localhost:9005 in your browser.

What’s Included

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, 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 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.

Commands

UnderTasker can do everything at once, or just certain tasks. 

  • gulp install Copies over frameworks/dependencies from node_modules. This should typically only ever be used at the start of setting up a project.
  • gulp brew-coffee Converts coffeescript files inside source/coffee to source/js/app.js
  • gulp build-css Only compiles, autoprefixes, and minifies the CSS. 
  • gulp build-js Minimizes and uglifies everything in the js directory into a single file (including app.js).
  • gulp imagemin Attempts to optimize any JPG/PNG/GIF images in source/img.
  • guild build Build all static assets from source, including sass and javascript, as well as tries to optimize any JPG/PNG files in source/img.
  • gulp deploy Builds, validates and deploys your .publish directory and compiled assets to the git repository specified. This might take a few minutes, depending on the size of your site and connection speed.
  • gulp github Runs gulp build and attempts to deploy to your project's Github Pages.
  • gulp clean Cleans out (deletes) the dist folders.
  • gulp jekyll Runs jekyll and builds the site into .publish.
  • gulp watch Watches for any css/HTML changes as well as changes to HTML in site/source, and updates the site accordingly.

Usage

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 gulp. UnderTasker users BrowserSync, which allows you to make edits to the CSS, Javascript, and HTML and it will automatically compile and update in the browser for you.

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 ./dist.

Example

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.

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 beyond what's written in these docs. Your best bet is to first go read up on Gulp, 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.

Changes

For updates and changes to this project, please refer to changelog.md.

Marie's Projects

Marie doesn’t have any public repositories yet.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.