More Related Content
Similar to フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013 (20)
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
- 3. • ⾃自⼰己紹介
• Gruntとは
• Grunt概要
• Gruntプラグイン
• 活⽤用事例例
• バックエンド開発での利利⽤用
• 事例例
• PHP関連プラグイン
本⽇日のメニュー
2013/9/24 (火)
- 14. • grunt-‐‑‒contrib(公式プラグイン:25個)でどんなことができるか https://github.com/gruntjs/grunt-‐‑‒contrib
• grunt-‐‑‒contrib-‐‑‒clean Clean files and folders.
• grunt-‐‑‒contrib-‐‑‒coffee Compile CoffeeScript files to JavaScript.
• grunt-‐‑‒contrib-‐‑‒compass Compile Compass to CSS
• grunt-‐‑‒contrib-‐‑‒compress Compress files and folders.
• grunt-‐‑‒contrib-‐‑‒concat Concatenate files.
• grunt-‐‑‒contrib-‐‑‒connect Start a connect web server.
• grunt-‐‑‒contrib-‐‑‒copy Copy files and folders.
• grunt-‐‑‒contrib-‐‑‒cssmin Compress CSS files.
• grunt-‐‑‒contrib-‐‑‒csslint Lint CSS files.
• grunt-‐‑‒contrib-‐‑‒handlebars Precompile Handlebars templates to JST file.
• grunt-‐‑‒contrib-‐‑‒htmlmin Minify HTML
• grunt-‐‑‒contrib-‐‑‒imagemin Minify PNG and JPEG images
• grunt-‐‑‒contrib-‐‑‒jade Compile Jade files to HTML.
• grunt-‐‑‒contrib-‐‑‒jasmine Run jasmine specs headlessly through PhantomJS.
• grunt-‐‑‒contrib-‐‑‒jshint Validate files with JSHint.
• grunt-‐‑‒contrib-‐‑‒jst Precompile Underscore templates to JST file.
• grunt-‐‑‒contrib-‐‑‒less Compile LESS files 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 files to CSS.
• grunt-‐‑‒contrib-‐‑‒uglify Minify files with UglifyJS.
• grunt-‐‑‒contrib-‐‑‒watch Run predefined tasks whenever watched file patterns are added, changed or deleted.
• grunt-‐‑‒contrib-‐‑‒yuidoc Compile YUIDoc Documentation.
2013/9/24 (火)
- 16. • 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま
せんか?
• コンパイル、ビルドのコマンド実⾏行行
• Sass(SCSS,less)を変換、CoffeeScriptを変換
• 本番配布⽤用に画像の圧縮、JSの難読化、CSSのミニファイ
• 規則正しく予想できるファイル名(card1.png,card2.png,...)
へ直接アクセスされないように隠蔽するのにハッシュのリネーム
• CDNのキャッシュをクリアするために⾛走らせているコマンド
• srcにパラメータ付与、ファイル名変更更、等
• テストの実⾏行行
• Lint, シンタックスチェック, UNITテスト,等
• その他、無限の可能性が...!!!
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 (火)
- 22. Gruntのデモ
• Wordpressで試します
• 今回使⽤用するプラグイン
• gruntでミニファイ
• grunt-‐‑‒contrib-‐‑‒cssmin
• grunt-‐‑‒contrib-‐‑‒uglify
• gruntで構⽂文チェック
• grunt-‐‑‒contrib-‐‑‒csslint
• grunt-‐‑‒contrib-‐‑‒jshint
• gruntでPHP!
• 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 (火)
- 32. % npm init #package.jsonを生成
% npm publish #公開!
% npm info hoge #npmに登録されたのを確認
1.開発環境へGruntを導⼊入
たったこれだけ!
2013/9/24 (火)