Automatizarea proceselor cu Grunt

A short presentation why and how to use automation, on the client side.

Transcript

1. Automatizarea proceselor cu Grunt
2. Andrei Pfeiffer UI/UX Developer & Frontend Architect Autor CTRL-D
3. James Shore Rigorous, Professional JavaScript http://vimeo.com/69872310
4. Solutii automatizare The Javascript Build Tool for Node.js Flexibil; Setup mai lent; The Javascript Task Runner Out-of-the-box; Setup rapid;
5. De ce automatizare? ➔ Set complet de unit-teste; ➔ Refactorizare; ➔ Build dezvoltare: compilare resurse; ➔ Build productie: compactare resurse; ➔ Verificare calitate cod; ➔ Documentatie; ➔ Similar cu un proces “batch”;
6. De ce Grunt? ➔ Setup rapid; ➔ Curba rapida de invatare; ➔ Multe plugin-uri disponibile; http://gruntjs.com/plugins ➔ Popular;
7. Pas 1: nodejs + npm ➔ Windows & Mac (via installer) http://nodejs.org/download/ ➔ Linux (via package manager) https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
8. Pas 2: package.json ➔ Definim proprietatile proiectului; ➔ Definim pachetele necesare; ➔ Se stocheaza in root-ul proiectului; ➔ https://npmjs.org/doc/json.html
9. Pas 2: package.json { “name”: “proiect demo” }
10. Pas 2: package.json { “name”: “proiect demo”, “version”: “0.1” } (via installer)
11. Pas 2: package.json { “name”: “proiect demo”, “version”: “0.1”, “description”: “lorem ipsum” } (via installer)
12. Pas 2: package.json { “name”: “proiect demo”, “version”: “0.1”, “description”: “lorem ipsum”, “devDependencies”: { “grunt”: “0.4.1”, “grunt-contrib-jshint”: “>=0.6.0”, “grunt-contrib-qunit”: “*” } }
13. Pas 3: npm install npm install ➔ Rulare din root folder (unde e si package.json); ➔ Instalare locala; ➔ Se va crea folderul “node_modules”; ➔ Adaugat in .gitignore; ➔ Nu instalati global dependintele;
14. Pas 4: grunt cli npm install -g grunt-cli ➔ Instalare globala; ➔ Rulare “grunt” de oriunde; ➔ Acces din linia de comanda;
15. Pas 5: Gruntfile.js ➔ Configurarea proceselor; ➔ Se stocheaza in root-ul proiectului; ➔ http://gruntjs.com/sample-gruntfile
16. Pas 5: Gruntfile.js module.exports = function(grunt) { };
17. Pas 5: Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ }); };
18. Pas 5: Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['src/*.js'] } }); };
19. Pas 5: Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['src/*.js'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); };
20. Pas 5: Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['src/*.js'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint']); };
21. Pas 5: Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['src/*.js'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint']); };
22. Pas 5: Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ jshint: { files: ['src/*.js'] }, qunit: { all: ['test/*.html'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.registerTask('default', ['jshint', 'qunit']); };
23. Pas 6: Rulare suita procese grunt grunt qunit
24. Concluzii 1. Scrii o data, rulezi oricand; 2. Rulare manuala sau automata; 3. Testare regresiva; 4. Refactorizare mult usurata; 5. Cod calitativ;
25. Va multumesc mult! Intrebari? Sugestii? Reclamatii?