The Front End Build System

Drew Machat / @negativev / alleyinteractive.com

Covering:

the old tools

the new tools

what they do

the even newer tools

This still works...

compass compile

compass watch

...but

who likes rvm?

/usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:135:in require': cannot load such file -- sass/script/node (LoadError)
          from /usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:135:inrescue in require' from /usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:144:in require'
          from /usr/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in' from /usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in require'
          from /usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:inrequire' from /usr/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:2:in block in '
          from /usr/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1:ineach' from /usr/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1:in '
          from /usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:inrequire' from /usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in require'
          from /usr/lib/ruby/gems/1.9.1/gems/compass-0.12.2/lib/compass/sass_extensions.rb:9:in' from /usr/local/lib/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in require'
          from /usr/bin/compass:23:in'

Front end = tooling

Organize!
Use new standards
Lint your code
Handles cross-browser issues
Don't assume VIP
Make your life easier
Make everyone's life easier

maybe more like this?

good tools shouldn't be hard

Commonly used grunt tasks were added to the wp-starter-theme to standardize the build process, and make it easy to get started.

Why grunt?

Large ecosystem
Widely used
It's (mostly) just JSON

wp starter theme

github.com/alleyinteractive/wp-starter-theme

Use npm install to install the node modules you'll need to run grunt.

package.json
Gruntfile.js
node_modules/
client/
  - grunt/
  - images/
  - js/
  - sass/

Note: The node_modules folder should not be committed to version control

Two commands run the tasks to compile your source files:

# watches your source files for changes to trigger compile
grunt watch

# compile with minification or production-specific settings
grunt build

Under the hood

Tasks are split up into module specific config structures. There are tons of other available grunt modules, this just gives us the basics.

client/grunt/
  - compass.json
  - concat.json
  - cssmin.json
  - imagemin.json
  - jshint.json
  - postcss.js
  - scsslint.json
  - uglify.json

More possibilities

HTML templates and minification
Javascript preprocessor
SVG minification
Testing
Reports
Versioning

More tasks

Adding tasks is easy. load-grunt-config automatically discovers installed modules and their config files.

# install a new grunt module and add it to package.json
npm install --save-dev grunt-contrib-htmlmin

# provide a config file for the module
vim client/grunt/htmlmin.json

# run the 'htmlmin' task
grunt htmlmin

# optionally add 'htmlmin' task to a parent script like watch
vim client/grunt/aliases.json

Chained tasks

Some tasks need to be chained to be effective. For example, javascript files should be linted, concatenated and then minified.

{
  "scripts": [
    "jshint",
    "concat",
    "uglify"
  ],
  "styles": [
    "scsslint",
    "compass",
    "postcss",
    "cssmin",
    "imagemin"
  ],
  "build": [
    "scripts",
    "styles"
  ]
}

Grunt requires some tedious gluing of things by hand, which is one reason people prefer an approach like the one taken by gulp

Grunt: the bad parts

Slow
Brittle
Community momentum = ▼
No pipes
No dependency trees
How old is it?? Gahh

good thing we live in the future

gulp
broccoli
brunch
duo
browserify
systemjs

What is webpack?

Fast
Trees
Bundle assets
Loaders/Transformers
Code optimization

An example

template.html

<div class="banner">
  <h1>{{ title }}</h1>
  <img src="banner.png">
</div>

component.js

var template = require('./template.html'),
    compiled = Handlebars.compile(template),
    context = { title: 'Webpack Wins' },
    html = compiled(context);

document.body.appendChild(html);

Webpack crawls the tree for both require and src, so in this example, requiring component.js will bundle the template, and the image defined in the template. You can specify a number of preprocessors (urlencoded images, cache busting filenames, js transpilation, source maps, etc) to run on each of these file types directly in the stream. Relative links will be converted to work in the static production folder.

Common chunks
Stylesheet output
Module style interop

The Front End Build System

dmachat

The Front End Build System

0 0

alley-grunt-frontend