フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える！ @M_Ishikawa #yapcasia
•
21 j'aime•7,573 vues
YAPC::Asia Tokyo 2013 発表資料 #yapcasia grunt, yapc, perl, yapcasia
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える！ @M_Ishikawa #yapcasia
Similaire à フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える！ @M_Ishikawa #yapcasia (20)
Dernier
Dernier (8)
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える！ @M_Ishikawa #yapcasia
- 2. 本⽇日の⽬目標 •Gruntがなにかを知る •Perl開発でGruntの使い道を知る •Gruntプラグインを⾃自分で開発できる ようにする ⼊入⾨門者向けの内容です 2013/9/24 (火)
- 10. 2013/9/24 (火)
- 14. • node.js製のフロントエンド開発⽀支援ツール • フロントエンド関連ファイルのビルドを⾏行行う • 開発⽤用、公開⽤用ディレクトリを分けて管理理し、公開⽤用に画像を圧 縮したりJSを難読化したりCSSプリプロセッサ変換（Sass等） をしたりテストしたり etc... • プラグインによりツールを拡張できる • プラグインの開発が簡単（node=JS） • Gruntプラグイン＝nodeモジュールなのでnpmで管理理されてます 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 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 (火)
- 21. • 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま せんか？ • コンパイル、ビルドのコマンド実⾏行行 • Sass(SCSS,less)を変換、CoffeeScriptを変換 • 本番配布⽤用に画像の圧縮、JSの難読化、CSSのミニファイ • 規則正しく予想できるファイル名（card1.png,card2.png,...） へ直接アクセスされないように隠蔽するのにハッシュのリネーム • CDNのキャッシュをクリアするために⾛走らせているコマンド • srcにパラメータ付与、ファイル名変更更、等 • テストの実⾏行行 • Lint, シンタックスチェック, UNITテスト,等 • その他、無限の可能性が...!!! Gruntの使いどころ 2013/9/24 (火)
- 22. •1.開発環境へnode、Gruntを導⼊入 •ちなみに本番運⽤用サーバへnodeを⼊入れる必要は ありません！あくまで開発⽀支援で使うのみです。 •2.プロジェクトリポジトリへGruntfile.jsと package.jsonを⼊入れて、node_̲modules を.gitignoreに⼊入れる •3.各開発環境では npm install を実⾏行行して node_̲modules以下にGruntプラグインを構築 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. •Gruntfile.js •Gruntの設定ファイル •package.json •Gruntで使⽤用するプラグインのパッ ケージ管理理＆依存管理理 2.プロジェクトへ Gruntfile.js と package.json を設置 2013/9/24 (火)
- 25. % npm install 3.node_̲modules以下に Gruntプラグインを構築 package.json 正しく書かれていれば node_̲modules ディレクトリ 以下にプラグインがインストールされます。 2013/9/24 (火)
- 27. Gruntのデモ • Catalistに載せたBootswatch(Bootstrap)で作ったサンプル試 します • 今回使⽤用するプラグイン • Gruntで構⽂文チェック • grunt-‐‑‒contrib-‐‑‒csslint • grunt-‐‑‒contrib-‐‑‒jshint • Gruntでミニファイ • grunt-‐‑‒contrib-‐‑‒cssmin • grunt-‐‑‒contrib-‐‑‒uglify • grunt-‐‑‒contrib-‐‑‒imagemin • GruntでPerl！ • grunt-‐‑‒perllint 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 (火)
- 31. 開発確認⽤用 ・読みやすいJS ・読みやすいCSS デプロイ⽤用 ・難読化したJS ・圧縮化したCSS Write Code ・CoffeeScript ・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 (火)
- 34. 例例：Perlのソースを監視して 構⽂文チェックを⾛走らせる grunt-‐‑‒watch でソースの変更更を監視して perl -‐‑‒wc を grunt-‐‑‒perllint を介して実⾏行行する ＝ 2013/9/24 (火)
- 36. 2013/9/24 (火)
- 39. • まずgruntプラグインを漁った • grunt-‐‑‒hash • grunt-‐‑‒md5 • grunt-‐‑‒hashmap • grunt-‐‑‒rev • grunt-‐‑‒rev-‐‑‒md5 • ちょっと違った • 作って公開した • そしたら… grunt-‐‑‒md5filename 開発の経緯 https://github.com/ishikawam/grunt-md5filename 2013/9/24 (火)
- 41. Gruntプラグインのファイル構成例例 • Gruntfile.js • package.json • README.* • LICENSE-‐‑‒* • tasks/ • node_̲modules/ • .git • .gitignore • .npmignore • .travis.yml • test/ • tmp/ 2013/9/24 (火)
- 43. % npm init #package.jsonを生成 % npm publish #公開！ % npm info hoge #npmに登録されたのを確認 ⾃自作gruntプラグインをnpmに＼公開／ たったこれだけ！ 2013/9/24 (火)
- 44. 2013/9/24 (火)
- 46. grunt-‐‑‒contrib-‐‑‒watch •ファイルの変更更を監視して、Gruntタ スクを開始します。 • Live Reload もできます。 • 連携すればGrowlで通知もでき ます。(grunt-‐‑‒notify) ただしデプロイ前はgrunt manualで 2013/9/24 (火)