Into theparrots & boars

world

INTRODUCTION TO FRONT-END AUTOMATION

Hi! I’m Dominik

FE/UX focused web dev @ Making Waves

Engaged into projects for FIFA

A little bit of a control freak

Baking&cooking in between

1. Motivation

2. Tools required

3. Part I - The Ingredients

4. Part II - The Recipes

5. Live example

Agenda

Motivation

Tools required

Ruby, SASS, Stylus, nib, #younameit

PART I

The Ingredients

bower.jsFRONT-END PACKAGE MANAGEMENT

General information

• Download

• Manage

• Share

Setup & usage

• npm install –g bower

• bower.json

Hint: use bower init to bootstrap bower.json file

bower.jsonPROJECT METADATA & DEPENDENCY MANAGEMENT

{‘name’ : ‘project name’,‘version’ : ‘project version’,‘dependencies’ : {

‘package-name’ : ‘package version’},‘devDependencies’ : {

‘package-name’ : ‘package version’,‘package-name’ : ‘package version’

}

}

Bower commands

• bower search <package name>

• bower install <package name>#<package version>

• bower install --save-dev <package name>#<package version>

Detailed package versioning info: https://www.npmjs.org/doc/json.html#dependencies

So… how to use bower.js?

.bowerrcGENERAL BOWER CONFIGURATION

{‘directory’ : ‘packages dir’,

}

Detailed bower specs: http://bit.ly/1aJGFf8

PART I

The Ingredients - yay, we got it!

PART II

The Recipes

grunt.jsFRONT-END TASK AUTOMATION

Task automation

• watching files for changes & live reload

• CSS/JS linting, minification

• CSS preprocessors compilation

• JS unit tests running

• HTML processing

• … and many many other boring tasks

Setup

• npm install –g grunt-cli

• package.json

• Gruntfile.js

What grunt-cli is?

grunt-cli

Project Ausing grunt v. X

Project Busing grunt v. Y

Project setup

• package.json

• Gruntfile.js

package.jsonPROJECT METADATA & GRUNT PLUGINS MANAGEMENT

{‘name’ : ‘project name’,‘version’ : ‘project version’,‘devDependencies’ : {

‘package-name’ : ‘package version’}

}

Hint: use npm init to create & preconfigure package.json

Useful commands

npm init

npm install <package>

npm install <package> --save-dev

Let’s see it in action

Gruntfile.jsGENERAL STRUCTURE

module.export = function(grunt) {

grunt.initConfig({‘pkg’ : grunt.file.readJSON(’package.json’),taskName : {

task configuration}

});

grunt.loadNpmTask(’plugin-name’);

grunt.registerTask(’complexTask’, [’taskName1’,’taskName2’,…]);

}

Gruntfile.js

grunt.initConfig({‘pkg’ : grunt.file.readJSON(’package.json’),taskName : {

targetName : { options: {

task options},src: ’files to be processed’,dest:’output files’

}}

});

grunt.loadNpmTask(’grunt-contrib-taskName’);

TASK DEFINITION & CONFIGURATION

Gruntfile.jsTASK EXECUTION

grunt taskName:taskTarget

Gruntfile.jsTASK CONFIGURATION – FILES MAPPING

Compact version

taskName : {targetName : {

options: {task options

},src: ’input files’,dest:’output file’

}}

Object version

taskName : {targetName : {

options: {task options

},files: {

’output file1’:[’input file1’,…],’output file2’:[’input fileX’,…]

}}

}

Let’s bake!

Thanks

@prokopddprokop @ github

blog.makingwaves.com