Web Workflows with Gruntjs

In the late edition of Google DevFest, GDG Tlemcen. I conducted a talk about how to create web workflows between teams and how we can automate tedious tasks in our web development process.

Transcript

2. Agenda 1- What are development workflows 2- Why are workflows useful 3- How to implement your custom workflow 4- Conclusion
3. What Workflows ?
4. What Workflow === Automation
5. Why You can make a Good thing alone, but Great Things in a team
6. Let’s Code Pre-requisites Javascript npm Bower git
7. Let’s Code Let’s Install: Node Package Manager Terminal $ npm install -g bower Comes with NodeJs $ npm install -g grunt-cli #Bower as global module #Grunt-cli as global module
8. Let’s Code Workflow Structure : Structure The structure we will build Builds dist Components scripts sass libs Gruntfile.js bower.json package.json Grunt Modules We Will Use : 1- grunt-contrib-clean 2- grunt-contrib-concat 3- grunt-contrib-uglify 4- grunt-contrib-sass 5- grunt-wiredep 6- grunt-contrib-watch
9. Let’s Code Install Grunt Modules Terminal $ npm install grunt --save-dev Basically they are just node packages $ #This will install the local grunt module and add it to package.json npm install grunt-contrib-uglify --save-dev
10. Let’s Code Gruntfile.js : Structure The guts of our workflow Builds dist Components scripts sass libs bower.json package.json Gruntfile.js
11. Conclusion There is no perfect workflow.