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