Dev2Dev - Faster Web Development using Bower, Grunt, Yeoman!

FasterWeb

Development

Bower, Grunt, YeomanDmitry Ivashutin at :iTechArt, Oct 2014

dev-to-devtalk

Dmitry IvashutinSoftware Engineer

Presenter

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?