36
フロントエンド制作向け ビルドツールGruntPHPバックエンド開発でする @MIshikawa 2013/9/24 ()

フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013

Embed Size (px)

DESCRIPTION

PHPカンファレンス2013 発表資料 #phpcon2013 php, grunt, phpcon, phpcon2013, nodejs, node, composer

Citation preview

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

2. Grunt PHPGrunt Grunt 2013/9/24 () 3. Grunt Grunt Grunt PHP 2013/9/24 () 4. 2013/9/24 () 5. Masayuki Ishikawa @M_Ishikawa id:ishikawam 2013/9/24 () 6. Grunt 2013/9/24 () 7. http://gruntjs.com/ 2013/9/24 () 8. HTMLCSS GruntGrunt Grunt (compasssass git) PHPer 2013/9/24 () 9. node.js JSCSSSass etc... node=JS Gruntnodenpm Grunt 2013/9/24 () 10. PEARGem npm git submodule npm 2013/9/24 () 11. Grunt nodeMac WindowsLinux Mac 2013/9/24 () 12. MacSublime Text Grunt Grunt 2013/9/24 () 13. Grunt http://gruntjs.com/plugins 25 1390 npm search gruntplugin | wc -l 2013/9/12 Grunt 2013/9/24 () 14. 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 () 15. nodeunit uglifyjs 2013/9/24 () 16. Sass(SCSS,less)CoeeScript JSCSS card1.png,card2.png,... CDN src Lint, , UNIT, ...!!! Grunt 2013/9/24 () 17. 1.nodeGrunt node 2.Gruntle.js package.jsonnode_modules .gitignore 3. npm install node_modulesGrunt Grunt 2013/9/24 () 18. # node % npm -g install grunt-cli % mkdir ~/hoge % cd ~/hoge % npm install grunt --save 1.Grunt npm 2013/9/24 () 19. Gruntle.js Grunt package.json Grunt 2. Gruntle.js package.json 2013/9/24 () 20. % npm install 3.node_modules Grunt package.json node_modules 2013/9/24 () 21. Grunt https://github.com/ishikawam/grunt-sample-php 2013/9/24 () 22. Grunt Wordpress grunt grunt-contrib-cssmin grunt-contrib-uglify grunt grunt-contrib-csslint grunt-contrib-jshint gruntPHP grunt-phpunit grunt-phplint grunt-phpcs 2013/9/24 () 23. Grunt grunt-contrib-cssmin css grunt-contrib-uglify JS grunt-contrib-imagemin png,jpg htdocs/{css,js,img}/ DocmentRoot assets/{css,js,img}/ htdocs assets 2013/9/24 () 24. Grunt grunt-contrib-csslint css grunt-contrib-jshint JS Gruntle.js Options 2013/9/24 () 25. GruntPHP grunt-phpunit PHP grunt-phplint PHP grunt-phpcs PHP PHPGrunt 2013/9/24 () 26. PHP 2013/9/24 () 27. PHP grunt-watch phpunitgrunt-phpunit 2013/9/24 () 28. Grunt 2013/9/24 () 29. grunt-watch phpunitgrunt-phpunit ( ) Grunt 2013/9/24 () 30. Grunt Gruntle.js package.json README.* LICENSE-* tasks/ node_modules/ .git .gitignore .npmignore .travis.yml test/ tmp/ 2013/9/24 () 31. Grunt Grunt 2013/9/24 () 32. % npm init #package.json % npm publish # % npm info hoge #npm 1.Grunt 2013/9/24 () 33. Grunt !! 2013/9/24 () 34. Github slideshare http://www.slideshare.net/mishikawa55/2013-phpcon https://github.com/ishikawam/grunt-sample-php 2013/9/24 () 35. @M_Ishikawa 2013/9/24 () 36. @M_Ishikawa 2013/9/24 ()