How to Be a Lazy (and Smart) Developer

An Introduction to build tools

Is your machine ready to go?

• Node.js and npm installed
Please ask if you aren't sure! Node 6+ please!
• Your favorite text editor ready to go

What we're learning today

• Scaffolding
• Old school build tooling (make)
• Dependency management with npm
• JS build tools: gulp and webpack

What do build tools help us do?

What do build tools help us do?

Developers write software to make their lives easier

• Start new projects
• Optimize: minify, bundle
• Validation: syntax errors, unit tests
• Compile: Sass, Babel
• Repeat the above when we make a file change

Scaffolding: Starting new projects

We use scaffolding tools (such as "rails new" or the create-react-app project) to quickly get a project started, or to see how a project works with all the pieces together

Exercise

We're going to try out Yeoman a scaffolding tool for webapps

$ npm install -g yo

Now, run yo from your terminal. What happens? Now, try running one of the many generator options!

$ mkdir [directory name]
$ cd [directory name]
$ yo [choose a generator]

Build Tool Basics

• Run complex series of tasks with simple commands
• Check your code for common problems
• Automatically run when a file changes
• Host a local server to help development (eg Ajax requests)

Makefile

• Initially used for compiling C programs
• Can be used for any command-line tasks
• Everything we do later with a build script (ex. gulp, npm scripts) you can do with make!
• Pre-installed Mac/Linux

Makefile sample

all: clean build

clean:
	rm -rf foo

build:
	mkdir foo && cd foo && touch index.html

Each word with a colon can be run as a command with make. "all" is what runs by default.

What makes Make cool and revolutionary as build tooling is it's smart: it does the minimum amount of work necessary based on what changed. In our simple example, this won't happen, but for compiling, it's A+

Dependency management

Programming nowadays is putting blocks together well. Dependency management is how we make sure we get the blocks we meant to, every time.

npm - Node Package Manager

"npm is the package manager for JavaScript and the world’s largest software registry" - npmjs.com

Yarn is an alternative to npm, and many of the commands map. It's fast and has some strong benefits.

Create a new directory and run "npm init"

package.json

{
  "name": "intro-to-build-tools",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "GDI Philly",
  "license": "MIT"
}

Adding dependencies

Use npm to install a package AND save it to our dependencies!

$ npm install --save dinosaur-fetcher

Exercise

• Install the dinosaur fetcher module in your node project
• Create index.js and fill it in with the code below

const dino = require('dinosaur-fetcher');

console.log(dino.random());

Scripts?? Let's scripts!!

The "scripts" section of package.json can be any word, and you can run with "npm run [word]"

Some words have default behaviors, such as "start" and "install", and npm has lots of details on that.

Edit package.json to look like:

  "scripts": {
    "test": "echo \"No tests yet!\"",
    "start": "node index.js"
  },

And run "npm start"

JavaScript Build Tools!

We'll talk about two today:

• Gulp
• Webpack

Gulp

gulpjs.com

Pass files through the processes that need to occur. How do you make a car on the assembly line?

Exercise

• Install gulp as a dependency using npm
• Create a "gulpfile.js" file in the project we used with npm
• BONUS: Add a "script" task to run gulp (will demo in front)
• BONUS: Where is gulp in package.json if you install as a developer dependency (-D vs. -S)?

var gulp = require('gulp');

gulp.task('default', function() {
  gulp.src('./*.js')
    .pipe(gulp.dest('dist'));
});

All about Gulp

• What's a task?
• What's source?
• What's pipe?

Useful things!

• Linters - ESLint
• Compilers - Babel, compression, etc.
• Sourcemaps
• Watch

Webpack

webpack.js.org

Webpack is a module bundler for web applications.

Webpack: Simple

Webpack is smart. It understands lots of module definitions (CommonJS, AMD, ES 6 modules, etc.) and puts things together

More Webpack: Loaders & Plugins

Loaders are how webpack understands files - how you can 'require()' a CSS file, or an image file, even!

Plugins perform actions on "compilations" or "chunks" of bundled code, vs. on a per file basis like a loader

Exercise

Let's make a basic webpack configuration!

Work through this article here

WTF Webpack?

https://medium.com/@polakallen/wtf-is-webpack-b45460a49457

Making Sense of All the Frontend Build Tools

Article Here

Frontend Masters

Webpack Course