jsCafe v13 Grunt

Embed Size (px)

DESCRIPTION

jsCafe v13で発表した Grunt のビギナーズ向けのスライドです。 間違い・不明点があれば連絡してもらえれば直します。

Text of jsCafe v13 Grunt

  • 1. GRUNT jsCafe vol.13

2. Grunt Grunt NodeJS SASSCoeeScript 3. First Step Grunt Install Next Step Grunt API grunt-init grunt-init install grunt-init Tasks grunt-contrib-* Grunt 4. First Step 5. Grunt Install Grunt grunt-cli grunt # The Grunt command line interface. $ npm install -g grunt-cli 6. 1. npm 2. Grunt 3. 7. 1. npm 2. Grunt 3. package.json 8. 1. npm 2. Grunt 3. package.json npm install 9. 1. npm 2. Grunt 3. package.json Gruntle.js npm install 10. 1. npm package.json { "name": "My-Project-Name", "version": "0.0.0", "description": "jsCafe GruntJs Startup." } Grunt nameversiondescription 3 11. 2. Grunt # Grunt $ npm install grunt --save-dev [-D] # Grunt Plugin $ npm install --save-dev [-D] --save-dev -D package.json 12. 3. Gruntle.js Gruntle.js Gruntle.coee 3 Step 1. grunt.initCong( ) 2. grunt.loadNpmTasks( ) 3. grunt.registerTask( , [ ]) 13. Gruntle.js - 1 / 2 : Grunt : module.exports = function(grunt){ ! grunt.initConfig({ ! ! concat:{ ! ! ! dist:{ ! ! ! ! src: ['foo.js' , 'bar.js'], ! ! ! ! dest: 'main.js' ! ! ! } ! ! } ! }); ! // ... 14. Gruntle.js - 2 / 2 ! // ... ... ! // ! grunt.loadNpmTasks('grunt-contrib-concat'); ! // Default ! grunt.registerTask('default', ['concat']); ! // ! grunt.registerTask('foo', ['concat:dist']); }; 15. 3 # default $ grunt # concat () $ grunt concat # concat => dist () $ grunt concat:dist 16. Next Step 17. Grunt API Grunt API ( include Lo-Dash ) JSON, YAML Grunt API http://gruntjs.com/api/grunt 18. Grunt API - 1 / 3 grunt.initConfig({ ! // pkg package.json ! pkg: grunt.file.readJSON('package.json'), ! // banner ! banner: '/**n'+ ! '* Name: n'+ ! '* Version: n'+ ! '* Description: n'+ ! '* Date: n'+ ! '*/n', ! // ... 19. Grunt API - 2 / 3 ! // ... ... ! concat: { ! ! options: { ! ! ! // banner ! ! ! banner: 'n' ! ! }, ! ! dist: { ! ! ! src: ['foo.js', 'bar.js'], ! ! ! dest: 'main.js' ! ! } ! } }); 20. Grunt API - 3 / 3 # /** * Name: My-Project-Name * Version: 0.0.0 * Description: jsCafe Gruntjs Startup. * Date: 2013-08-25 */ // foo.js // bar.js 21. Grunt API Cong package.json compass cong.yaml Gruntle Gruntle 22. Watch grunt-contrib-livereload LiveReload grunt-contrib-watch grunt-contrib-livereload watch 23. less: { ! dist: { ! ! files: { "css/*.css": "css/*.less" } ! } }, watch: { ! options: { ! ! livereload: true // ! }, ! less_files: { ! ! files: 'css/*.less', ! ! tasks: ['less:dist'] //less ! } grunt-contrib-watch - 1 / 2 24. Gruntle LiveReload HTML grunt-contrib-watch - 2 / 2 25. grunt-init Scaolding 26. grunt-init Install Grunt Gruntle Grunt http://gruntjs.com/project-scaolding # grunt-init $ npm install -g grunt-init 27. grunt-init grunt-init git grunt-init-gruntle : Gruntle grunt-init-gruntplugin : Grunt Plugin grunt-init-jquery : jQuery Plugin ~/.grunt-init Path 28. grunt-init # git clone $ git clone git@github.com:gruntjs/grunt-init-jquery.git /.grunt-init/jquery # $ grunt-init jquery $ grunt-init # Path $ grunt-init 29. Tasks Grunt 30. Grunt https://github.com/gruntjs/grunt-contrib grunt-contrib-* 31. grunt-contrib-clean grunt-contrib-compress grunt-contrib-concat grunt-contrib-copy altJS 32. grunt-contrib-coee CoeeScript grunt-contrib-jshint JSHint grunt-contrib-requirejs RequireJS r.js 1uglify grunt-contrib-uglify minify grunt-contrib-yuidoc YUIDoc JavaScript JavaScript altJS 33. grunt-contrib-compass SASS Compass grunt-contrib-cssmin CSS minify gzip grunt-contrib-csslint CSSLint grunt-contrib-less LESS grunt-contrib-sass SASS grunt-contrib-stylus Stylus 34. grunt-contrib-htmlmin Minify HTML grunt-contrib-jade Compile Jade les to HTML. grunt-contrib-handlebars Precompile Handlebars templates to JST le. grunt-contrib-jst Precompile Underscore templates to JST le. HTML 35. grunt-contrib-nodeunit Nodeunit grunt-contrib-jasmine PhantomJS jasmine grunt-contrib-qunit PhantomJS QUnit 36. grunt-contrib-imagemin PNG JPEG OptiPNG, pngquant, jpegtran grunt-contrib-connect > Node connect Web grunt-contrib-watch LiveReload grunt-contrib-watch grunt-contrib-livereload deprecated () 37. More Tasks 38. Grunt Plugins. - 1 / 3 grunt-typescript TypeScript grunt-haxe Haxe JavaScript grunt-karma karma grunt-csso CSSO CSS Optimizer grunt-csscomb CSSComb CSS 39. Grunt Plugins. - 2 / 3 grunt-imageoptim Mac ImageOptim ImageAlpha grunt-data-uri CSS dataURI embed grunt-jekyll Ruby Static Blog jekyll grunt-shell grunt-include-replace HTML 40. Grunt Plugins. - 3 / 3 grunt-connect-proxy grunt-contrib-connect proxy http-proxy grunt-express-server Express grunt-express-watch app.js grunt-text-replace grunt-open URL 41. More... Grunt ... 42. Web jekyll HTML + Grunt + MAMP Grunt Plugins grunt-jekyll grunt-contrib-coee grunt-contrib-copy grunt-contrib-compass grunt-contrib-watch grunt-contrib-concat 43. Grunt Grunt 44. Grunt CSSJS CSSJS 2 Watch 45. Less less: { ! libs: { /* configs */ }, ! pages: { /* configs */ } }, watch: { ! lib_files: { ! ! tasks: ['less:libs', ...] ! }, ! page_files: { ! ! tasks: ['less:pages', ...] ! } } 46. HTML CSS JavaScript RubyPHP Watch PHPUnit PhantomJS Vagrant 47. Grunt 48. @sakunyo