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/
          

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: 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

  
{{ title }}
  

          

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.

More

• Common chunks
• Stylesheet output
• Module style interop

;

Resources

• The initial structure of the wp-starter-theme
• Food Republic's Webpack Config
• Using webpack with angular (has some webpack specific information as well)
• Pete Hunt on using Webpack at Instagram