フロントエンド制作向けビルド ツールgruntがバックエンド...

50
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @MIshikawa PerlとGruntが恋をした 2013/9/24 ()

Upload: masayuki-ishikawa

Post on 22-Jun-2015

5.919 views

Category:

Technology


2 download

DESCRIPTION

YAPC::Asia Tokyo 2013 発表資料 #yapcasia grunt, yapc, perl, yapcasia

TRANSCRIPT

  • 1. Grunt @M_Ishikawa PerlGrunt 2013/9/24 ()

2. Grunt PerlGrunt Grunt 2013/9/24 () 3. Perl 2013/9/24 () 4. Grunt Grunt Grunt Grunt Grunt 2013/9/24 () 5. 2013/9/24 () 6. Masayuki Ishikawa @M_Ishikawa id:ishikawam GREE YAPCLT 2013/9/24 () 7. Macbook https://www.google.co.jp/search?q=&tbm=isch 2013/9/24 () 8. Grunt 2013/9/24 () 9. http://gruntjs.com/ 2013/9/24 () 10. 2013/9/24 () 11. id:naoya 2013/9/24 () 12. HTMLCSS GruntGrunt Grunt (compasssass git) Perler 2013/9/24 () 13. 2013/9/24 () 14. node.js JSCSSSass etc... node=JS Gruntnodenpm Grunt 2013/9/24 () 15. CPANPEARGem npm git submodule npm 2013/9/24 () 16. Grunt nodeMac WindowsLinux Mac 2013/9/24 () 17. MacSublime Text Grunt Grunt 2013/9/24 () 18. Grunt http://gruntjs.com/plugins 25 1390 npm search gruntplugin | wc -l 2013/9/12 Grunt 2013/9/24 () 19. grunt-contrib:25 https://github.com/gruntjs/grunt-contrib grunt-contrib-clean Clean les and folders. grunt-contrib-coee Compile CoeeScript les to JavaScript. grunt-contrib-compass Compile Compass to CSS grunt-contrib-compress Compress les and folders. grunt-contrib-concat Concatenate les. grunt-contrib-connect Start a connect web server. grunt-contrib-copy Copy les and folders. grunt-contrib-cssmin Compress CSS les. grunt-contrib-csslint Lint CSS les. grunt-contrib-handlebars Precompile Handlebars templates to JST le. grunt-contrib-htmlmin Minify HTML grunt-contrib-imagemin Minify PNG and JPEG images grunt-contrib-jade Compile Jade les to HTML. grunt-contrib-jasmine Run jasmine specs headlessly through PhantomJS. grunt-contrib-jshint Validate les with JSHint. grunt-contrib-jst Precompile Underscore templates to JST le. grunt-contrib-less Compile LESS les to CSS. grunt-contrib-nodeunit Run Nodeunit unit tests. grunt-contrib-qunit Run QUnit unit tests in a headless PhantomJS instance. grunt-contrib-requirejs Optimize RequireJS projects using r.js. grunt-contrib-sass Compile Sass to CSS grunt-contrib-stylus Compile Stylus les to CSS. grunt-contrib-uglify Minify les with UglifyJS. grunt-contrib-watch Run predened tasks whenever watched le patterns are added, changed or deleted. grunt-contrib-yuidoc Compile YUIDoc Documentation. 2013/9/24 () 20. nodeunit uglifyjs 2013/9/24 () 21. Sass(SCSS,less)CoeeScript JSCSS card1.png,card2.png,... CDN src Lint, , UNIT, ...!!! Grunt 2013/9/24 () 22. 1.nodeGrunt node 2.Gruntle.js package.jsonnode_modules .gitignore 3. npm install node_modulesGrunt Grunt 2013/9/24 () 23. # node % npm -g install grunt-cli % mkdir ~/hoge % cd ~/hoge % npm install grunt --save 1.Grunt npm 2013/9/24 () 24. Gruntle.js Grunt package.json Grunt 2. Gruntle.js package.json 2013/9/24 () 25. % npm install 3.node_modules Grunt package.json node_modules 2013/9/24 () 26. Grunt https://github.com/ishikawam/grunt-sample-yapc 2013/9/24 () 27. Grunt CatalistBootswatch(Bootstrap) Grunt grunt-contrib-csslint grunt-contrib-jshint Grunt grunt-contrib-cssmin grunt-contrib-uglify grunt-contrib-imagemin GruntPerl grunt-perllint 2013/9/24 () 28. Grunt grunt-contrib-csslint css grunt-contrib-jshint JS Gruntle.js Options 2013/9/24 () 29. Grunt grunt-contrib-cssmin css grunt-contrib-uglify JS grunt-contrib-imagemin png,jpg htdocs/{css,js,img}/ DocmentRoot assets/{css,js,img}/ DocumentRoot static 2013/9/24 () 30. DocumentRoot static 2013/9/24 () 31. JS CSS JS CSS Write Code CoeeScript Sass(SCSS) DocumentRoot /** * Grunt Sample SCSS */ $text_color: #121c00; #sample { h1 { margin: 10px; } p { color: $text_color; } } /** * Grunt Sample SCSS */ #sample h1 { margin: 10px; } #sample p { color: h1 {#121c00; } #sample h1{margin:10px}#sample p{color:#121c00} 2013/9/24 () 32. GruntPerl grunt-perllint YAPC Perl 2013/9/24 () 33. Perl 2013/9/24 () 34. Perl grunt-watch perl -wc grunt-perllint 2013/9/24 () 35. Perl Grunt perldoc etc... 2013/9/24 () 36. 2013/9/24 () 37. Grunt 2013/9/24 () 38. grunt-watch Test::Moregrunt-perlunit Grunt 2013/9/24 () 39. grunt grunt-hash grunt-md5 grunt-hashmap grunt-rev grunt-rev-md5 grunt-md5lename https://github.com/ishikawam/grunt-md5lename 2013/9/24 () 40. https://github.com/gruntjs/grunt-contrib/issues/164 2013/9/24 () 41. Grunt Gruntle.js package.json README.* LICENSE-* tasks/ node_modules/ .git .gitignore .npmignore .travis.yml test/ tmp/ 2013/9/24 () 42. Grunt Grunt 2013/9/24 () 43. % npm init #package.json % npm publish # % npm info hoge #npm gruntnpm 2013/9/24 () 44. 2013/9/24 () 45. Grunt watch manual 2013/9/24 () 46. grunt-contrib-watch Grunt Live Reload Growl (grunt-notify) grunt manual 2013/9/24 () 47. Grunt !! 2013/9/24 () 48. Github slideshare http://www.slideshare.net/mishikawa55/2013-yapc https://github.com/ishikawam/grunt-sample-yapc 2013/9/24 () 49. @M_Ishikawa 2013/9/24 () 50. @M_Ishikawa 2013/9/24 ()