Front-end development automation with Grunt
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Front-end development automation with Grunt

  • 3,544 views
Uploaded on

Introduction to Grunt, a JavaScript task runner

Introduction to Grunt, a JavaScript task runner

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,544
On Slideshare
3,504
From Embeds
40
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
4

Embeds 40

https://twitter.com 40

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 Friday, 25 October 13
  • 2. A workflow example Lint Test Open browser Watch assets Friday, 25 October 13 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. Friday, 25 October 13
  • 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 Friday, 25 October 13
  • 5. Friday, 25 October 13
  • 6. Grunt Friday, 25 October 13
  • 7. What is Grunt? • A JavaScript task runner npm install -g grunt-client • Lots of plugins for front-end and Node development Friday, 25 October 13
  • 8. 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! Friday, 25 October 13
  • 9. module.exports(function (grunt) { [‘a-cool-grunt-plugin’, ‘another-plugin’ ].forEach(grunt.loadNpmTasks); grunt.initConfig({ // ... }); }); Friday, 25 October 13
  • 10. 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 Friday, 25 October 13
  • 11. 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”) Friday, 25 October 13
  • 12. Install JSHint plugin • npm install grunt-contrib-jshint • grunt jshint Friday, 25 October 13
  • 13. grunt.initConfig({ jshint: { all: [‘Gruntfile.js’, ‘js/**/*.js’] } }); Friday, 25 October 13
  • 14. Sass • CSS, as a language, sucks • Sass is a nice language that compiles to CSS • We have variables, inheritance/mixins, a clean syntax, partials... Friday, 25 October 13
  • 15. @import _reset $main-color: #cff $fg-color: #000 @mixin std-button background: $main-color color: $fg-color a.button, button +std-button Friday, 25 October 13
  • 16. Install Sass plugin • npm install • grunt sass Friday, 25 October 13 grunt-contrib-sass
  • 17. grunt.initConfig({ sass: { dev: { options: { style: ‘expanded’, lineComments: true }, files: { ‘css/main.css’: ‘sass/main.sass’ } } } }); Friday, 25 October 13
  • 18. // 1-to-1 file mapping. Ex: // sass/unicorn.sass -> css/unicorn.css files: { expand: true, cwd: ‘sass’, src: [‘**/*.sass’], dest: ‘css’, ext: ‘.css’ }); Friday, 25 October 13
  • 19. 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 Friday, 25 October 13
  • 20. Install Watch plugin • npm install • grunt watch Friday, 25 October 13 grunt-contrib-watch
  • 21. grunt.initConfig({ watch: { sass: { files: [‘sass/**/*.sass’], tasks: [‘sass:dev’] } } }); Friday, 25 October 13
  • 22. 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”. Friday, 25 October 13
  • 23. grunt.registerTask(‘server’, [‘clean’, ‘jshint’, ‘sass:dev’, ‘jasmine’, ‘connect:server’, ‘open’, ‘watch’]); grunt.registerTask(‘release’, [‘clean’, ‘jshint’, ‘sass:prod’, ‘jasmine’, ‘copy:release’]); Friday, 25 October 13
  • 24. 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 ;) Friday, 25 October 13
  • 25. grunt.registerTask(‘version’, ‘shows version number’, function () { // implement our own task var pkg = grunt.file.readJSON( ‘package.json’); grunt.log.writeln(pkg.version); }); Friday, 25 October 13
  • 26. 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 Friday, 25 October 13
  • 27. 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 Friday, 25 October 13
  • 28. Sample code https://github.com/ belen-albeza/grunt-demo Friday, 25 October 13
  • 29. Demo Friday, 25 October 13
  • 30. A different use case • This is just not only for front-end or Node development... • Think of other projects you can automate! Friday, 25 October 13
  • 31. A book! Friday, 25 October 13
  • 32. 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 Friday, 25 October 13
  • 33. 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 Friday, 25 October 13
  • 34. Grunt to the rescue Lint sample code Convert from Github MD to Leanpub MD Friday, 25 October 13 Zip sample code Copy MD files to Dropbox
  • 35. 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 Friday, 25 October 13
  • 36. Thanks! Questions? @ladybenko Friday, 25 October 13