JavaScript Build tools, npm, bower, git

and grunt

Marc Torrent & Raúl Delgado

NPM“The trouble with programmers is that you can never

tell what a programmer is doing until it’s too late.”

—Seymour Cray

What is a package manager?Is a collection of software tools that automates the process of installing, upgrading,

configuring, and removing software packages

Why use a package manager?It is clean, tidy and forced everyone to have the same packages with the same versions

What managers are for JS?

Package managers for Javascript

Node Package Manager (NPM)

Back-end or Front-end ?Both, but mainly in back-end.

How do I use it?Command lines

How many packages have?

Some packages

Important command lines:

Node Package Manager (NPM)

$ npm init

$ npm search <package name | key word>

$ npm install <package name> | --save

$ npm uninstall <package name>

( --save option instructs NPM to include the package inside of the dependencies section of your

package.json )

Node Package Manager (NPM)

- Project’s name

- Author

- Version

- Dependencies

- Scripts

- Git repository

- Node engine

NPM Package.json

- Project’s name

- Author

- Version

- Dependencies

- Scripts

- Git repository

- Node engine

NPM Package.json

NPM info..

https://docs.npmjs.com/

https://docs.npmjs.com/getting-started/what-is-npm

https://quickleft.com/blog/creating-and-publishing-a-node-js-module/

http://howtonode.org/introduction-to-npm

http://www.sitepoint.com/beginners-guide-node-package-manager/

https://dreyacosta.com/webserver-con-node-y-express/

http://www.nodehispano.com/2012/04/una-introduccion-a-npm-nodejs/

https://www.google.es/

Bower“The reason why God could create the universe in six days do not

have to worry about it compatible with the previous version.”

—Anonymous

BOWER

Front-end package manager

How to install bower?

# npm install -g bower

Bower commands

$ bower init

$ bower search <package>

$ bower install <package>

$ bower uninstall <package>

Bower: bower.json

- name

- version

- packages

- version packages

.bowerrc :

This file is used, among other things, to

modify the directory where to install

components Bower.

Bower info…

http://bower.io/

https://www.codementor.io/bower/tutorial/beginner-tutorial-getting-started-bower-

package-manager

http://code.tutsplus.com/tutorials/how-to-setup-bower-in-your-next-project--cms-

20526

https://www.quora.com/Why-use-Bower-when-there-is-npm

http://blog.teamtreehouse.com/getting-started-bower

https://www.google.es/

Git

—Anonymous

“It’s not a bug – it’s an undocumented feature.”

VCS

What is Git ?

Version Control System

Why is it necessary to use a VCS ?

- Storage elements of the project

- Ability to make changes to stored items

- Historical record of the actions taken

What if you do not use?

Storage architectures

Centralized VCS (CVCS) Distributed VCS (DCVS)

Git

Why git?Git almost all operations are local:-To browse history

-See changes in another version

-Branches

Data integrity (checksum)-Way control redundancy to protect data integrity impossible to change a

file git project without knowing. You can not upload files corrupted.

Git actions are always modifiable- After making a commit it is very difficult to lose data

Git commands

SourceTree

Work styles

-Everybody works in

master-branch

-Branch for epic-task

-Commits for task

-Create branch for

stable version

-One user one

branch

-One task one

branch

-Create commit into

main branch por

stable version

-Master-branch

Developer-branch

User-branch

Task-branch

Git info…

http://git-scm.com/

http://git-scm.com/book/en/v2

https://git-scm.com/book/es/v1/Git-en-entornos-distribuidos-Gestionando-un-

proyecto

http://rogerdudler.github.io/git-guide/index.es.html

http://www.ndpsoftware.com/git-cheatsheet.html#loc=remote_repo;

http://blogs.atlassian.com/2012/03/git-vs-mercurial-why-git/

https://www.wikivs.com/wiki/Git_vs_Mercurial?

https://importantshock.wordpress.com/2008/08/07/git-vs-mercurial/

https://www.google.es/

Grunt.js is a Javascript task runner. At its bare core it does file manipulation (mkdir, reads, write, copy), print messages and helper methods to organize and configure multiple tasks. It takes care of differences among Operating Systems for you.

However, the real power comes in with the number of available plugins ready to use.

Installing GruntJS

npm install grunt --save-dev

npm install -g grunt-cli

➢ Add a Gruntfile to the project➢ Edit the configuration file for the tasks you want to run➢ Write your own tasks➢ Use plugins for common tasks

Gruntfile.js

module.exports = function(grunt) {

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

myTask: { a custom configuration object },

karma: {

unit: {

configFile: 'test/karma.conf.js'

}

}

};

// Load our own tasks

grunt.loadTasks('./tools/grunt-tasks');

// Load 3rd party tasks

grunt.loadNpmTasks('grunt-karma');

// Register our custom named task

grunt.registerTask('validate', ['karma:unit', ‘myTask]);

};

> npm install grunt-karma

grunt-contrib-sass --

save-dev

> grunt karma

……

> grunt validate

Grunt Tasks I

Basic Tasksgrunt.registerTask(taskName, [description,] taskFunction)

grunt.registerTask(‘myTask’, ‘This task is for example purposes’,

function(arg1, arg2) {

grunt.log.writeln(this.name + ‘, ‘ + arg1 + ‘ ‘ + arg2);

});

> grunt myTask:foo:12345

myTask, foo, 12345

Grunt Tasks II

Multi Tasksgrunt.registerMultiTask(taskName, [description,] taskFunction)

grunt.registerMultiTask(‘myTask’, ‘This task is for example

purposes’, function() {

grunt.log.writeln(this.target + ‘: ‘ +

this.data.description);

});

…

myTask: {

target1: {

description: ‘Target 1 description’,

list: [‘item1’, ‘item2’, ‘item3’]

},

target2: {

description: ‘Target 2 description’,

list: [‘item4’, ‘item5’, ‘item6’]

}

}

...

> grunt myTask:target1

target1: Target 1 description

> grunt myTask:target2

target2: Target 2 description

> grunt myTask

target1: Target 1 description

target2: Target 2 description

Grunt Tasks III

Alias Tasksgrunt.registerTask(taskName, [description, ] taskList)

grunt.registerTask(‘validate’,[‘karma:unit’, ‘myTask:target1’]);

> grunt validate

Karma running …

...

target1: Target 1 description

Grunt Tasks IV

Asynchronous Tasksgrunt.registerTask(‘myTask’,function(){

var done = this.async();

grunt.log.writeln(‘Processing task…’);

setTimeout(function(){

grunt.log.writeln(‘Task done’);

done();

}, 1000);

});

Fork Processgrunt.registerTask(‘myTask’,function(){

var done = this.async(),

options = {

cmd: ‘command_to_execute’,

args: [‘arg1’, ‘arg2’],

options: {}

};

grunt.util.spawn(options, done);

});

Build process with GruntJS

Build Process

➢grunt-contrib-jshint: syntax and coding style checking

➢grunt-contrib-sass: compile sass to css➢grunt-karma: pass client side testing➢compile-templates: from templates to html➢ requirejs: build requirejs optimized bundle➢clean: clean unused assets and create final

directory with production HTML and JS

Let’s see it in action!