Grunt.js

Transcript

2. Grunt
3. $ npm install -g grunt-cli Installation
4. Setup + Gruntfile.js package.json
5. $ npm init $ npm install grunt --save-dev $ npm install grunt-contrib-connect --save-dev $ npm install grunt-contrib-watch --save-dev $ npm install grunt-contrib-sass --save-dev $ npm install load-grunt-tasks --save-dev Install Grunt plugins
6. 1 { 2 "name": "my-project", 3 "version": "0.1.0", 4 "devDependencies": { 5 "grunt": "~0.4.2", 6 "grunt-contrib-connect": "~0.6.0", 7 "grunt-contrib-watch": "~0.5.3", 8 "grunt-contrib-sass": "~0.7.0", 9 "load-grunt-tasks": "~0.3.0" 10 } 11 } package.json https://npmjs.org/doc/json.html
7. • Loading Grunt plugins and tasks • "wrapper" function • Project and task configuration • Custom tasks Gruntfile.js http://gruntjs.com/getting-started
8. 1 module.exports = function(grunt) { 2 // instead of having multiple grunt.loadNpmTasks(''); 3 require('load-grunt-tasks')(grunt); 4 5 // Do grunt-related things in here 6 }; Gruntfile.js - wrapper http://gruntjs.com/getting-started
9. 1 module.exports = function(grunt) { 2 require('load-grunt-tasks')(grunt); 3 4 grunt.initConfig({ 5 connect: { 6 options: { 7 port: 9001, 8 open: true, 9 hostname: 'localhost' 10 }, 11 server: { 12 // specific configs for the server task 13 } 14 }, 15 }); 16 }; Gruntfile.js - task configuration http://gruntjs.com/getting-started
10. 1 // Default task(s). 2 grunt.registerTask('default', ['connect:server']); Gruntfile.js - custom tasks http://gruntjs.com/getting-started
11. 1 // Default task(s). 2 grunt.registerTask('default', ['connect:server']); Gruntfile.js - custom tasks 1 // A very basic default task. 2 grunt.registerTask('default', 'Logger', function() { 3 grunt.log.write('Logging...').ok(); 4 }); http://gruntjs.com/getting-started
12. Gruntfile.js - custom tasks 1 grunt.registerTask('server', [ 2 'clean:server', 3 'sass:server', 4 'connect:server', 5 'watch' 6 ]); http://gruntjs.com/getting-started
13. http://gruntjs.com/plugins
14. http://gruntjs.com/plugins
16. Concatenating 1 concat: { 2 'js/main.js': [ 3 'js/controllers/events.js', 4 'js/controllers/login.js', 5 'js/controllers/menu.js' 6 ] 7 } module: grunt-contrib-concat
17. Concatenating module: grunt-contrib-concat grunt-usemin + 1 <!-- build:js js/main.js --> 2 <script src="js/controllers/events.js"></script> 3 <script src="js/controllers/login.js"></script> 4 <script src="js/controllers/menu.js"></script> 5 <!-- endbuild -->
18. Watching files 1 watch: { 2 sass: { 3 files: ['styles/**/*.{scss,sass}'], 4 tasks: ['sass:server'] 5 }, 6 livereload: { 7 files: [ 8 'views/**/*.html', 9 'scripts/**/*.js', 10 'styles/**/*.css', 11 'img/**/*.{png,jpg,jpeg,gif,webp,svg}' 12 ], 13 options: { 14 livereload: true 15 } 16 } 17 } module: grunt-contrib-watch
19. Watching files module: grunt-contrib-watch - Waiting... OK >> File "public/styles/main.sass" changed. ! Running "sass:app" (sass) task ! Done, without errors. ... Reload public/styles/main.css ... Completed in 0.178s at Tue Jan 28 2014 12:22:51 GMT+0800 (MYT)
21. enjoy your automated workflow!
22. Advantages
23. @matiassingers github.com/matiassingers Thank you! Any questions?