dev2dev - faster web development using bower, grunt, yeoman!
TRANSCRIPT
![Page 1: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/1.jpg)
FasterWeb
Development
Bower, Grunt, YeomanDmitry Ivashutin at :iTechArt, Oct 2014
dev-to-devtalk
![Page 3: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/3.jpg)
Let’s imagine that you need to make a ...
web site!
![Page 4: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/4.jpg)
Old-school way ...
1) type everything from scratch ...2) search & download resources ...
![Page 5: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/5.jpg)
Lazy way ...
1) copy paste from other projects ...2) use resources from local ...
![Page 6: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/6.jpg)
Easy way ...
1) use templates and boilerplates ...2) use resource package managers ...
![Page 7: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/7.jpg)
Let’s start from the very beginning ...
![Page 8: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/8.jpg)
body & engine
![Page 9: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/9.jpg)
toolkit
![Page 10: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/10.jpg)
parts shop ...
![Page 11: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/11.jpg)
![Page 12: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/12.jpg)
Reduce the weight!
A packagemanagerfor web
![Page 13: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/13.jpg)
Easy as “One, Two, Three”
npm install -g bower
bower init
bower install <package> --save
bower search <name>
![Page 14: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/14.jpg)
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
![Page 15: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/15.jpg)
Let’s add nitrous oxide!
The Web’sScaffoldingTool forModern WebApps
![Page 16: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/16.jpg)
First steps
npm install -g yo
yo
npm install -g <generator>
run generator and follow Yeoman steps ...
![Page 17: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/17.jpg)
and that is only the beginning...
![Page 18: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/18.jpg)
Yeoman ...
can serve your web app ...
allows testing with Karma and Jasmine ...
helps generating files by templates ...
![Page 19: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/19.jpg)
performance parts ...
TheJavaScriptTaskRunner
![Page 20: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/20.jpg)
Start Slow to go Fast
npm install -g grunt-cli
and then prepare the Gruntfile ...
check your package.json*
![Page 21: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/21.jpg)
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" }}
![Page 22: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/22.jpg)
the Gruntfile
● The "wrapper" function
● Project and task configuration
● Loading Grunt plugins and tasks
● Register Custom tasks
![Page 23: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/23.jpg)
Wrapper function
module.exports = function (grunt) {
// Do grunt-related things in here
};
![Page 24: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/24.jpg)
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'
}
}
});
![Page 25: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/25.jpg)
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'] }
}
}
});
![Page 26: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/26.jpg)
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');
![Page 27: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/27.jpg)
Register Custom tasks
var debug = [
'jshint',
'clean:build',
'copy:debug',
'less:debug'
];
grunt.registerTask('debug', debug);
grunt.registerTask('Debug', debug);
![Page 28: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/28.jpg)
Usage
> grunt debug
Running "jshint:all" (jshint) task>> 100 files lint free.
Running "clean:build" (clean) taskCleaning ../build/ui/static...OK
Running "copy:debug" (copy) taskCreated 4 directories, copied 157 files
Running "less:debug" (less) taskFile ../build/css/base.css created.
![Page 29: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/29.jpg)
Over 3K plugins
![Page 30: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/30.jpg)
Remember Your Dev before?
![Page 31: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/31.jpg)
Rather sad ...
![Page 32: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/32.jpg)
Your Dev after
![Page 33: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/33.jpg)
looks much better!
![Page 34: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/34.jpg)
and that is still only the
beginning...
![Page 35: Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!](https://reader030.vdocuments.us/reader030/viewer/2022032700/55d57873bb61ebb32f8b45be/html5/thumbnails/35.jpg)
Questions?