Modern Development Workflow with Grunt

http://t32k.me/mol/log/modern-development-workflow-with-grunt/

Transcript

1. Modern Development Workflow with Grunt HTML5 Conference JP 2013 Koji Ishimoto
2. @t32k
4. - Why use Grunt? - How to use Grunt - Customize your Gruntfile! Agenda
5. Target HTML Corder Web Designer or
6. Why use Grunt?
7. The JavaScript Task Runner Linting Compiling Minification Testing Conversion Documentation Deployment
9. Complexity
10. GUI Apps
12. Paid Apps
13. $$$
14. Web Performance
15. 2007
17. 14 Rules for Faster-Loading Web Sites
18. 2013
19. #perfmatters
20. Network Render Compute
21. )5.-
    ΧϯϑΝϨϯε
    ɺ
    ϧʔϜ"ɺ
    
     ʰ8FCϑϩϯτΤϯυͷϨϯμϦϯάύϑΥʔϚϯεͱ࠷దԽ5JQTʱ
22. How to use Grunt
23. Install
25. $ npm install grunt-cli -g
26. Structure
27. Package.json Gruntfile.js .js or .coffee
30. Package.json
31. $ npm init
32. { "name": "grunt-demo", "version": "0.0.1", "description": "This is demo.", "main": "Gruntfile.js", "scripts": { "test": "grunt test" }, "author": "Koji Ishimoto", "license": "BSD-2-Clause" }
33. $ npm install grunt --save-dev $ npm install grunt-csso --save-dev
34. { "name": "grunt-demo", "version": "0.0.1", "description": "This is demo.", "main": "Gruntfile.js", "scripts": { "test": "grunt test" }, "author": "Koji Ishimoto", "license": "BSD-2-Clause", "devDependencies": { "grunt": "~0.4.2", "grunt-csso": "~0.5.2" } }
35. Package.json $ npm install A B
36. Gruntfile.js
37. $ npm install grunt-init -g $ git clone https://github.com/ gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile $ grunt-init gruntfile
38. module.exports = function(grunt) { // Project configuration. grunt.initConfig({ // Task configuration. csso: { files: { 'output.css': ['input.css'] } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-csso'); // Default task. grunt.registerTask('default', ['csso']); };
40. Load the task:
41. grunt.loadNpmTasks('grunt-csso');
42. Configure the task:
43. grunt.initConfig({ csso: { dist: { files: { 'output.css': ['input.css'] } } } });
44. Register the task:
45. grunt.registerTask('default', [‘csso’]);
46. $ grunt csso
47. Customize your Gruntfile!
49. grunt-contrib-***
51. $ npm install grunt-init -g $ git clone https://github.com/ gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin $ grunt-init gruntplugin
52. Maple Realistic preprocessors-based CSS framework for mobile.
54. 95,000byte 100,000byte 105,000byte 110,000byte 115,000byte 120,000byte Byte 270 1 135 67 202 Deploy times CSS file size as deploy
55. grunt stylesheet ['sass', 'autoprefixer', 'csscomb', 'csslint']
56. grunt typeset ['webfont', 'stylesheet']
57. grunt publish ['stylesheet', 'kss']
58. grunt build ['stylesheet', 'csso', 'imageoptim']
59. Jet Start
62. $ npm install yo -g $ npm install generator-maple -g $ mkdir your_proj && cd $_ $ yo maple $ grunt
63. - Automation - Customization - Start of Terminal Summary
64. Thanks! t32k @t32k koji.ishimoto
65. - flickr.com/photos/bitterjug/7670055210 - flickr.com/photos/epsos/8474532085 - flickr.com/photos/viernest/3380560365 - flickr.com/photos/81583603@N00/4099146279 - flickr.com/photos/peasap/2261077597 - flickr.com/photos/epsos/8097327748 Photo Credits