Workshop Javascript Build Tools. npm, bower, grunt, git. Presentado por Ing. Marc Torrent y Raúl Delgado

1. JavaScript Build tools, npm, bower, git
and grunt
Marc Torrent & Raúl Delgado

2. NPM
“The trouble with programmers is that you can never
tell what a programmer is doing until it’s too late.”
—Seymour Cray

3. 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

4. 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?

5. Some packages

6. 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 )

7. Node Package Manager (NPM)

8. - Project’s name
- Author
- Version
- Dependencies
- Scripts
- Git repository
- Node engine
NPM Package.json

9. - Project’s name
- Author
- Version
- Dependencies
- Scripts
- Git repository
- Node engine
NPM Package.json

10. 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/

11. 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

12. BOWER
Front-end package manager
How to install bower?
# npm install -g bower

13. Bower commands
$ bower init
$ bower search <package>
$ bower install <package>
$ bower uninstall <package>

14. 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.

15. 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/

16. Git
—Anonymous
“It’s not a bug – it’s an undocumented feature.”

17. 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?

18. Storage architectures
Centralized VCS (CVCS) Distributed VCS (DCVS)

19. 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

20. Git commands

21. SourceTree

22. 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

23. 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/

25. 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.

26. 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

27. 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

28. Grunt Tasks I
Basic Tasks
grunt.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

29. Grunt Tasks II
Multi Tasks
grunt.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

30. Grunt Tasks III
Alias Tasks
grunt.registerTask(taskName, [description, ] taskList)
grunt.registerTask(‘validate’,[‘karma:unit’, ‘myTask:target1’]);
> grunt validate
Karma running …
...
target1: Target 1 description

31. Grunt Tasks IV
Asynchronous Tasks
grunt.registerTask(‘myTask’,function(){
var done = this.async();
grunt.log.writeln(‘Processing task…’);
setTimeout(function(){
grunt.log.writeln(‘Task done’);
done();
}, 1000);
});
Fork Process
grunt.registerTask(‘myTask’,function(){
var done = this.async(),
options = {
cmd: ‘command_to_execute’,
args: [‘arg1’, ‘arg2’],
options: {}
};
grunt.util.spawn(options, done);
});

32. Build process with GruntJS

33. 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

34. Let’s see it in action!