Introduction to gruntjs

A short talk given at Untangle the web on 24/09/2013 @ Skills Matter Exchange

Transcript

1. Intro to grunt
2. Hi I’m Sam Mason, a Developer at Benchmark @samjbmason http:/ /mason.io
3. Intro to grunt
4. What is grunt? Not this This
5. Runs all the tasks grunt.initConfig({ Buy Presents: { for girlfriend: { Price: >£100 }, for sister: { Price: <£10 } } });
6. grunt loves git The configuration is just a javascript file so it can be added to git and shared
7. install node Go to http://nodejs.org/ Install the correct package. Fin!
8. install grunt-cli `npm install -g grunt-cli` In the terminal, type
9. To actually install grunt part 1 package.json In your project folder, create Gruntfile.js &
10. To actually install grunt part 2 package.json { "name": "my-project-name", "version": "1.0.0" } Then run in terminal npm install grunt --save-dev
11. grunt is installed in your project package.json { "name": "your-project", "version": "1.0.0", "devDependencies": { "grunt": "~0.4.1" } }
12. install the grunt-contrib plugin Terminal npm install grunt-contrib --save-dev
13. grunt is installed in your project package.json { "name": "your-project", "version": "1.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib": "~0.7.0" } }
14. the gruntfile - wrapper function Gruntfile.js module.exports = function(grunt) { // All your code goes in between here };
15. the gruntfile - load plugin Gruntfile.js module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib'); };
16. the gruntfile - configuration wrapper Gruntfile.js grunt.initConfig({ // All your configuration goes in here });
17. the gruntfile - configuration wrapper Gruntfile.js grunt.initConfig({ sass: { dist: { options: { style: 'compressed' }, files: { 'css/main.css': 'css/main.scss' } } } });
18. the gruntfile - register tasks Gruntfile.js grunt.registerTask('default', ['sass']);
19. Setting up multiple tasks Gruntfile.js grunt.registerTask('default', ['sass']); grunt.registerTask('prod', ['sass','uglify']);
20. the gruntfile Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ sass: { dist: { options: { style: 'compressed' }, files: { 'css/main.css': 'css/main.scss' } } } }); grunt.loadNpmTasks('grunt-contrib'); grunt.registerTask('default', ['sass']); }
21. the gruntfile - configuration wrapper Gruntfile.js grunt.initConfig({ uglify: { my_target: { files: { 'js/main.min.js': ['js/main.js'] } } } });
22. Run the task Terminal - from your project folder grunt
23. Thanks for listening @samjbmason http:/ /mason.io