Build Tools? But Why?

Build tools make certain web processes “easier” – usually this means less manual.

I too had a hangup on using them, and only took the plunge into figuring them out because I wanted to:

  • Eliminate duplication of redefining values to override bootstraps defaults
  • Reduce overall file size by leaving out parts of bootstrap not needed for the project
  • Remove the hassle of manually looking up and applying prefixes for things like flexbox
  • Accomplish the above with minimal project bloat in terms of additional directories and other clutter

I initially tried it using Bootstraps directions but those weren’t clear enough for a build tools n00b like me. So it forced me into looking up how to piece together a project using build tools.

In the example repo used for this tutorial, only the scss directory from bootstrap is included because we aren’t using their build process as defined in bootstrap docs, but our own, slimmer one (build tool pros may say this is just perception, but meh! We’re getting the job done either way).

Demo Build Tools Project

  1. Download or clone the starter repo from Github
  2. Fire up Terminal and don’t panic – we’re only going to enter a handful of commands!
  3. Install node if you haven’t used it before by downloading here: https://nodejs.org/
    • Click the “Recommended for most users” option
  4. Install Grunt by entering the following command in Terminal
    npm install -g grunt-cli

  5. In Terminal, change directory to where you saved the repo files, and point terminal to /src/
    • Example command: cd /Users/[username]/Desktop/GitHub/[repo]/src
    • #protip on Mac: Use finder to open the repo and src directory, then type “cd ” into Terminal, and drag the src folder into Terminal to have the file path appear, then press enter to complete the change directory command. If it doesn’t work, make sure you inserted a space after “cd”
  6. Run the following command to gain the “modules” necessary for our build processes to run
    npm install

    • This will create a node_modules directory > see note below on the importance of ignoring this in your github repo
  7. Once the install process is complete, you are finished with the “hard” part of setting up your build tool setup!
  8. Finally, run the following command:
    grunt

    • This will begin a ‘watch’ task, which as you write and save your SASS, Grunt will:
      1. Compile your scss
        • Errors in your SASS will be thrown in Terminal, so keep an eye on it!
      2. Autoprefix your css using postcss
      3. Place the final compiled file in /dist/
      4. Show in Terminal which step it’s working on, and when it’s completed the steps

Starting/Stopping the Build Process

When you are at a stopping spot in writing your SASS, here’s what to know to stop and then to pick it up again.

  • Processes in Terminal (on Mac) can be stopped with Ctrl + C
  • To begin again:
    1. Make sure you are still in the /src/ directory in Terminal
    2. Enter the command grunt
    3. Continue doin yo’ thaaang

Modifying the Example Repo SASS

  • The index file in the repo has the /dist/ css file included, as well as some super basic themeable elements.
  • The SASS structure is setup to demo how to work with bootstrap, but you are free to change *nearly all* of the structure with a few things to note:
    • Do not change the name of the init.scss unless you also alter it’s name in the Gruntfile
      • You will have to stop your grunt watch process and restart for the change to take affect
    • ^ Same with changing the /dist/ directory name
  • _config holds variables, variable overrides, and includes to bootstrap’s required files
    • This file is setup to demonstrate which files are a minimum for bootstrap functionality, and also some nice tricks to alter things like theme colors, and fonts and heading sizes
  •  init.scss file is where all includes for the other scss files exist, including the ones for bootstrap optional files
    • Also includes some suggested breakouts if you choose to use an atomic organization system
  • _mixins and _functions are blank, just made available as already included to help kickoff your project

Notes

  • If you create your own repo, be sure to ignore the node_modules directory!
    • The beauty of build tools is as long as the package.json file is present in the repo, another project contributer can run “npm install” and download the necessary items for the build processes to work.
  • If you want to change the init file name, the distribution location, or add additional files to watch, you will need to update the Gruntfile
    • Be sure to stop any running grunt process first
    • Comments are inlcluded on how to add additional files and distro locations, such as into a WordPress theme
  • SASS error on first attempt to compile? Depending on how you may have worked with SASS in the past, you may get an error that Ruby and or SASS is needed. Resolve that (on a Mac) by:
    • Ctrl + C to end your grunt task
    • Enter the command: sudo gem install sass
    • Then you can begin your grunt task again

Finally, an apology that I didn’t keep better initial notes on where I gleaned my info from in terms of adding “more info” links, and a disclaimer that I may not have the answer you’re looking for if you reach out with issues, but I can try!

Related Topics

Bootstrap | CSS | Github | SASS