Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!
35
Faster Web Development Bower, Grunt, Yeoman Dmitry Ivashutin at :iTechArt, Oct 2014 dev-to-dev talk
-
Upload
dzmitry-ivashutsin -
Category
Software
-
view
565 -
download
2
Transcript of Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!
FasterWeb
Development
Bower, Grunt, YeomanDmitry Ivashutin at :iTechArt, Oct 2014
dev-to-devtalk
Let’s imagine that you need to make a ...
web site!
Old-school way ...
1) type everything from scratch ...2) search & download resources ...
Lazy way ...
1) copy paste from other projects ...2) use resources from local ...
Easy way ...
1) use templates and boilerplates ...2) use resource package managers ...
Let’s start from the very beginning ...
body & engine
toolkit
parts shop ...
Reduce the weight!
A packagemanagerfor web
Easy as “One, Two, Three”
npm install -g bower
bower init
bower install <package> --save
bower search <name>
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
Let’s add nitrous oxide!
The Web’sScaffoldingTool forModern WebApps
First steps
npm install -g yo
yo
npm install -g <generator>
run generator and follow Yeoman steps ...
and that is only the beginning...
Yeoman ...
can serve your web app ...
allows testing with Karma and Jasmine ...
helps generating files by templates ...
performance parts ...
TheJavaScriptTaskRunner
Start Slow to go Fast
npm install -g grunt-cli
and then prepare the Gruntfile ...
check your package.json*
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" }}
the Gruntfile
● The "wrapper" function
● Project and task configuration
● Loading Grunt plugins and tasks
● Register Custom tasks
Wrapper function
module.exports = function (grunt) {
// Do grunt-related things in here
};
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'
}
}
});
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'] }
}
}
});
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');
Register Custom tasks
var debug = [
'jshint',
'clean:build',
'copy:debug',
'less:debug'
];
grunt.registerTask('debug', debug);
grunt.registerTask('Debug', debug);
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.
Over 3K plugins
Remember Your Dev before?
Rather sad ...
Your Dev after
looks much better!
and that is still only the
beginning...
Questions?
