A GUIDE TO FRONT-END BUILD TOOLS

WHO THE HELL ARE YOU?

MATTHEWBETA

NOTES & CODE 👇 HERE 👇

https://git.io/vVofO

WHY THE HELL WOULD I USE BUILD TOOLS?

REASON #1:

COMPILING

EXAMPLE #1:
ONLINE CODE EDITORS
 

WHAT ARE THEY GOOD FOR?

http://codepen.io

DO THE DEMO NOW, MATT

REASON #2:
DELIVERY

YOUR DESK

(PROBABLY)

BUILD TO SEND SOMEWHERE ELSE

EXAMPLE #2:
DESKTOP APPS

WHAT ARE THEY GOOD FOR?

PREPROS

http://prepros.io

DEMO AGAIN

REASON #3:
LAZINESS/MONOTONY

😩🔫

EXAMPLE #3:
JAVASCRIPT BUILD TOOLS

THE TOOLS OF THE BUILD TOOL TRADE

NODE + NPM + GITHUB + COMMAND LINE

GRUNT

http://gruntjs.com

BASIC GRUNT

$ npm install --save-dev grunt-such-task grunt-very-supported grunt-wow

INSTALL PLUGINS

// Gruntfile.js

module.exports = function(grunt) {

  grunt.initConfig({

    // COMPILE SCSS FILES INTO CSS
    sass: {
      options: {
            sourceMap: true
        },
        dist: {
            files: {
                'styles/css/styles.css': 'styles/scss/styles.scss'
            }
        }
    },

  });

  grunt.loadNpmTasks('grunt-sass');

  grunt.registerTask('default', ['sass']);

};

ONE MORE DEMO