Improving development workflow with GruntJS

How grunt helps improve the workflow of developers for day to day tasks

Transcript

1. @meetzaki Improving workflow with Grunt.js Zaki Shaheen
2. @meetzaki Agenda • A typical developer workflow • Room for improvement • What is Grunt • Short intro to NodeJS • What is NPM • Installing Grunt • Grunt Modules • Demo • Yeoman and advanced tooling
3. @meetzaki Refresh Browser Test functionality Check performance Deploy Save Code
4. @meetzaki Pros • You are familiar with it. • You wont have to change anything. Cons • Its wasteful and sub-optimal. • Standards are not followed. • Performance is not ensured. Quality is not ensured.
5. @meetzaki How we really work
6. @meetzaki Refresh Browser Test functionality Check performance Deploy Save Code
7. @meetzaki What about all this? Linting Preprocessors Unit testing Concatenation Minification Versioning Version control Dependencies
8. @meetzaki A grunt to rescue our day
9. @meetzaki
10. @meetzaki Grunt grunt deploy Save Code
11. @meetzaki What is GruntJS Task based CLI Tool Runs on NodeJS and NPM Massive Eco-system Your next best friend.
12. @meetzaki What is NodeJS
13. @meetzaki Javascript out of the browser (Finally) Cross-platform runtime environment Built on Google’s V8 Engine Event-Driven, non-blocking i/o for real time apps Makes way for NPM
14. @meetzaki This is not the V8 I am referring to. See this.
15. @meetzaki Node Package Manager Modularising web tooling works on package.json https://www.npmjs.org What is
16. @meetzaki { "name": "example-project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1" } } npm install
17. @meetzaki
18. @meetzaki Installing grunt npm install grunt-cli -g npm install grunt --save-dev What is Gruntfile.js load packages create custom commands
19. @meetzaki module.exports = function(grunt) { // 1. All configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { // 2. Configuration for concatinating files goes here. } }); // 3. Where we tell Grunt we plan to use this plug-in. grunt.loadNpmTasks('grunt-contrib-concat'); // 4. Where we tell Grunt what to do when we type "grunt" into the terminal. grunt.registerTask('default', ['concat']); }; http://24ways.org/2013/grunt-is-not-weird-and-hard/
20. @meetzaki concat: { dist: { src: [ 'js/libs/*.js', // All JS in the libs folder 'js/global.js' // This specific file ], dest: 'js/build/production.js', } }
21. @meetzaki npm install <modulename> --save-dev grunt-contrib-watch grunt-contrib-jshint grunt-contrib-concat grunt-contrib-less grunt-notify grunt-contrib-copy http://danburzo.ro/grunt/chapters/appendix-plugins/
22. @meetzaki
23. @meetzaki Demo
24. @meetzaki Who uses grunt? Who doesn’t? Who uses Grunt Twitter Bootstrap Gruntfile Wordpress build process Gruntfile
25. @meetzaki Twitter bootstrap clean, jshint, concat, uglify, less, autoprefixer, csslint, cssmin, copy, w3cvalidation, qUnit
26. @meetzaki Wordpress autoprefixer, clean, copy, sass, cssmin, jshint, phpunit, uglify, concat, ...
27. @meetzaki Yeoman and advanced tooling seperate tasking for staging and production - don’t miss a step again http://yeoman.io http://chrisawren.com/posts/Advanced-Grunt- tooling
28. @meetzaki https://github.com/jrcryer/grunt-pagespeed
29. @meetzaki • Enforce standards with csslint, jslint, phpmd, phpcpd, phpcs automatically • Automate testing with phpunit, qunit • Increase performance with cssmin, concat, uglify • See stats with pagespeed • improve and standardize deployments • Save your time and gain quality! • One more step closer to Continuous integration after introduction of vagrant Why Grunt?
30. @meetzaki Next steps Identify what you do repeatedly Ask whether there is a grunt plugin for it automate it repeat
31. @meetzaki Questions?