In-house dev-to-dev talk on modern tools for faster web development. Introductory level presentation for developers unfamiliar with Grunt/Bower/Yeoman.

1. Faster
Web
Development
Bower, Grunt, Yeoman
dev-to-dev
talk
Dmitry Ivashutin at :iTechArt, Oct 2014

2. Presenter
Dmitry Ivashutin
Software Engineer

3. Let’s imagine that you need to make a ...
web site!

4. Old-school way ...
1) type everything from scratch ...
2) search & download resources ...

5. Lazy way ...
1) copy paste from other projects ...
2) use resources from local ...

6. Easy way ...
1) use templates and boilerplates ...
2) use resource package managers ...

7. Let’s start from the very beginning ...

8. body & engine

9. toolkit

10. parts shop ...

12. A package
manager
for web
Reduce the weight!

13. Easy as “One, Two, Three”
npm install -g bower
bower search <name>
bower init
bower install <package> --save

14. bower.json config
{
"name": "PimpYourDev",
"version": "0.0.1",
"license": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular": "~1.2.16",
"jquery": "~2.0.3",
"bootstrap": "~3.1.1",
"modernizr": "~2.8.2",
"moment": "~2.6.0",
"underscore": "~1.7.0"
}
}
bower install

15. The Web’s
Scaffolding
Tool for
Modern
WebApps
Let’s add nitrous oxide!

16. First steps
npm install -g yo
npm install -g <generator>
yo
run generator and follow Yeoman steps ...

17. and that is only
the beginning...

18. Yeoman ...
can serve
your web
app ...
allows testing
with Karma and
Jasmine ...
helps generating
files by
templates ...

19. The
JavaScript
Task
Runner
performance parts ...

20. Start Slow to go Fast
npm install -g grunt-cli
check your package.json*
and then prepare the Gruntfile ...

21. package.json
{
"name": "PimpYourDev",
"version": "0.0.2",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}

22. the Gruntfile
● The "wrapper" function
● Project and task configuration
● Loading Grunt plugins and tasks
● Register Custom tasks

23. Wrapper function
module.exports = function (grunt) {
// Do grunt-related things in here
};

24. Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all: ['Gruntfile.js', '<%= userPath %>/**/*.js'],
// On errors with parsing config please ensure
// it's saved in regular UTF-8 encoding (without BOM).
options: {
jshintrc: '.jshintrc'
}
}
});

25. Configuration (with options)
grunt.initConfig({
less: {
options: { sourceMap: true },
debug: {
files: { 'build/css/base.css': 'dev/less/base.less' }
},
release: {
options: { cleancss: true },
files: { 'build/css/all.min.css': ['dev/less/base.less'] }
}
}
});

26. Loading plugins and tasks
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-concat');

27. Register Custom tasks
var debug = [
'jshint',
'clean:build',
'copy:debug',
'less:debug'
];
grunt.registerTask('debug', debug);
grunt.registerTask('Debug', debug);

28. Usage
> grunt debug
Running "jshint:all" (jshint) task
>> 100 files lint free.
Running "clean:build" (clean) task
Cleaning ../build/ui/static...OK
Running "copy:debug" (copy) task
Created 4 directories, copied 157 files
Running "less:debug" (less) task
File ../build/css/base.css created.

29. Over 3K plugins

30. Remember Your Dev
before?

31. Rather sad ...

32. Your Dev after

33. looks much better!

34. and that is still
only the
beginning...

35. Questions?