Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workshop 3: JavaScript build tools

631 views

Published on

Workshop Javascript Build Tools. npm, bower, grunt, git.

Presentado por Ing. Marc Torrent y Raúl Delgado

Published in: Software
  • Be the first to comment

  • Be the first to like this

Workshop 3: JavaScript build tools

  1. 1. JavaScript Build tools, npm, bower, git and grunt Marc Torrent & Raúl Delgado
  2. 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. 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. 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. 5. Some packages
  6. 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. 7. Node Package Manager (NPM)
  8. 8. - Project’s name - Author - Version - Dependencies - Scripts - Git repository - Node engine NPM Package.json
  9. 9. - Project’s name - Author - Version - Dependencies - Scripts - Git repository - Node engine NPM Package.json
  10. 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. 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. 12. BOWER Front-end package manager How to install bower? # npm install -g bower
  13. 13. Bower commands $ bower init $ bower search <package> $ bower install <package> $ bower uninstall <package>
  14. 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. 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. 16. Git —Anonymous “It’s not a bug – it’s an undocumented feature.”
  17. 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. 18. Storage architectures Centralized VCS (CVCS) Distributed VCS (DCVS)
  19. 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. 20. Git commands
  21. 21. SourceTree
  22. 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. 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/
  24. 24. 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.
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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); });
  31. 31. Build process with GruntJS
  32. 32. 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
  33. 33. Let’s see it in action!

×