Your SlideShare is downloading. ×
0
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front End Development Automation with Grunt

2,578

Published on

Front End Development Automation with Grunt: Belen Albeza.

Front End Development Automation with Grunt: Belen Albeza.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,578
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Front-End Automation with Grunt Belén Albeza @ladybenko www.belenalbeza.com
  • 2. A workflow example Lint Test Open browser Watch assets Compile assets Run server Recompile assets Reload browser
  • 3. We do this already… • python -m SimpleHTTPServer • open index.html • sass --watch sass:css • jshint main.js • ./conquer_the_world.sh • Etc.
  • 4. What if we integrate all these tasks? • We can setup long flows and run it with just one task • We can stop the flow if a task fails (for instance, abort when linting spots an error) • Everyone in the dev team can follow the same workflow
  • 5. Grunt
  • 6. What is Grunt? • A JavaScript task runner npm install -g grunt-cli • Lots of plugins for front-end and Node development
  • 7. Gruntfile.js • A JavaScript file with our Grunt config • Think of it as a Makefile, Rakefile, etc. • We can use plugins that provide common tasks… • …or we can cook our own tasks!
  • 8. module.exports(function (grunt) { [‘a-cool-grunt-plugin’, ‘another-plugin’ ].forEach(grunt.loadNpmTasks); grunt.initConfig({ // ... }); });
  • 9. How to run tasks • grunt mytask will run all the targets of • grunt mytask:target will run the specific mytask target of mytask grunt clean grunt sass:dev
  • 10. Linter • A Linter analyses our code • Looks for syntax errors (awesome for script languages) • Looks for formatting errors (ex: “don’t use more than 80 chars per line!”) • Looks for bad practises (ex: “you can’t use this variable without declaring it first”)
  • 11. Install JSHint plugin • npm install grunt-contrib-jshint • grunt jshint
  • 12. grunt.initConfig({ jshint: { all: [‘Gruntfile.js’, ‘js/**/*.js’] } });
  • 13. Sass • CSS, as a language, sucks • Sass is a nice language that compiles to CSS • We have variables, inheritance/mixins, a clean syntax, partials...
  • 14. @import _reset $main-color: #cff $fg-color: #000 @mixin std-button background: $main-color color: $fg-color a.button, button +std-button
  • 15. Install Sass plugin • npm install • grunt sass grunt-contrib-sass
  • 16. grunt.initConfig({ sass: { dev: { options: { style: ‘expanded’, lineComments: true }, files: { ‘css/main.css’: ‘sass/main.sass’ } } } });
  • 17. // 1-to-1 file mapping. Ex: // sass/unicorn.sass -> css/unicorn.css files: { expand: true, cwd: ‘sass’, src: [‘**/*.sass’], dest: ‘css’, ext: ‘.css’ });
  • 18. Watch • You may have several daemons listening for changes to files to do something • Examples: Sass/LESS stylesheets, CoffeeScript files, Handlebars templates, etc. • With Grunt you can group all of them in a single place
  • 19. Install Watch plugin • npm install • grunt watch grunt-contrib-watch
  • 20. grunt.initConfig({ watch: { sass: { files: [‘sass/**/*.sass’], tasks: [‘sass:dev’] } } });
  • 21. Build your own flows • You can create tasks than run other tasks • Use them to set-up workflows, like “regular development” or “build a release”.
  • 22. grunt.registerTask(‘server’, [‘clean’, ‘jshint’, ‘sass:dev’, ‘jasmine’, ‘connect:server’, ‘open’, ‘watch’]); grunt.registerTask(‘release’, [‘clean’, ‘jshint’, ‘sass:prod’, ‘jasmine’, ‘copy:release’]);
  • 23. Create your own tasks • If you don’t find the right plugin, you can create your very own task… • …and wrap it in a plugin so others can use it as well ;)
  • 24. grunt.registerTask(‘version’, ‘shows version number’, function () { // implement our own task var pkg = grunt.file.readJSON( ‘package.json’); grunt.log.writeln(pkg.version); });
  • 25. Other useful plugins • grunt-contrib-clean: deletes files and directories (usefull for temporary files) • grunt-contrib-jasmine: run Jasmine tests from the console and in the browser • grunt-contrib-copy: copy files (useful to make builds) • grunt-contrib-connect: run a local server
  • 26. Browse more plugins • http://gruntjs.com/plugins • There are plugins to minify CSS, reload a browser tab, create zips, erase files, build assets (Handlebars, Coffee, LESS, etc.)… OS grunt plugin! • And our Firefoxgrunt-firefoxos:) npm install
  • 27. Sample code https://github.com/ belen-albeza/grunt-demo
  • 28. Demo
  • 29. A different use case • This is just not only for front-end or Node development... • Think of other projects you can automate!
  • 30. A book!
  • 31. A book in Leanpub • Leanpub is a publishing platform • You write your manuscripts in Markdown (plain text) and put them into a shared folder in Dropbox • Then, they build a pretty eBook from your plain text files
  • 32. Problem • You need to put your manuscript files in Dropbox… • …but I want my own version control in Github… • …and I have other files (PSD’s, sample code, etc.) that I don’t want to put into that folder
  • 33. Grunt to the rescue Lint sample code Convert from Github MD to Leanpub MD Zip sample code Copy MD files to Dropbox
  • 34. More about Grunt • Grunt’s official “Getting Started Guide” www.gruntjs.com/getting-started • How to create your own tasks http:// gruntjs.com/creating-tasks • “Power-Up Your Front-End Development with Grunt” www.leanpub.com/grunt
  • 35. Thanks! Questions? @ladybenko

×