Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_I...
Search
M_Ishikawa
September 21, 2013
Technology
1
11k
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
YAPC::Asia Tokyo 2013 発表資料
#yapcasia
grunt, yapc, perl, yapcasia
M_Ishikawa
September 21, 2013
Tweet
Share
More Decks by M_Ishikawa
See All by M_Ishikawa
Socialiteのベストプラクティス
ishikawam
0
89
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
ishikawam
0
130
WebPayのCheckoutHelper が超便利!!! って話
ishikawam
0
120
IPtalkの使い方
ishikawam
0
500
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
ishikawam
0
240
Other Decks in Technology
See All in Technology
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Applications with DynamoDB
mza
93
6.2k
RailsConf 2023
tenderlove
29
1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
A Philosophy of Restraint
colly
203
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
It's Worth the Effort
3n
184
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_̲Ishikawa 〜~PerlとGruntが恋をした〜~ 2013/9/24 (Ր)
本⽇日の⽬目標 •Gruntがなにかを知る •Perl開発でGruntの使い道を知る •Gruntプラグインを⾃自分で開発できる ようにする ⼊入⾨門者向けの内容です 2013/9/24 (Ր)
Perlの話は… ほんの少し… だけど 2013/9/24 (Ր)
•⾃自⼰己紹介 •Gruntとは •Gruntの動作環境 •Gruntプラグイン •Gruntの使い所 •導⼊入までの流流れ •デモ •プラグインを作ってみよう •Grunt利利⽤用のコツ 本⽇日のメニュー
2013/9/24 (Ր)
⾃自⼰己紹介 2013/9/24 (Ր)
•Masayuki Ishikawa •@M_̲Ishikawa •id:ishikawam •GREEでブラウザソーシャルゲームの開発エンジニア •去年年のYAPCでLTデビュー •「おせっかい駆動開発のススメ」 •「ドヤリング型開発」を提唱 2013/9/24 (Ր)
•スタバなどのカフェでMacbook開いて ドヤ顔でコーディングする近代の開発 ⼿手法 •検索索ワード:ドヤラー、ドヤリング ドヤリング型開発とは IUUQTXXXHPPHMFDPKQTFBSDI RυϠϦϯάUCNJTDI おさらい 2013/9/24 (Ր)
Gruntとは 2013/9/24 (Ր)
http://gruntjs.com/ 2013/9/24 (Ր)
2013/9/24 (Ր)
id:naoya 公認 2013/9/24 (Ր)
•最近のHTMLとかCSSのイベント・カンファレンスで 使っているのをよく⾒見見かける •講演内容がGruntではなくても、講演者はGrunt使⽤用 が前提でセッションを進めてたり •フロントエンド開発では結構当たり前に使っている •デザイナーが「⿊黒い画⾯面」といいだしたのはGruntを 触るのがきっかけ?(実際はcompassとかsassとか gitとかだけど) でも我々Perlerにはほとんど縁がない! 2013/9/24
(Ր)
この機会に名前だけでも 覚えていって下さい 2013/9/24 (Ր)
• node.js製のフロントエンド開発⽀支援ツール • フロントエンド関連ファイルのビルドを⾏行行う • 開発⽤用、公開⽤用ディレクトリを分けて管理理し、公開⽤用に画像を圧 縮したりJSを難読化したりCSSプリプロセッサ変換(Sass等) をしたりテストしたり etc... •
プラグインによりツールを拡張できる • プラグインの開発が簡単(node=JS) • Gruntプラグイン=nodeモジュールなのでnpmで管理理されてます Gruntとは 2013/9/24 (Ր)
•依存管理理といったら例例えばこんなの •CPANとかPEARとかGemは?>パッケージ管理理。 •※npmはパッケージ管理理、依存管理理の両⽅方できる •git submoduleではなく機能として利利⽤用できる npm のおさらい ライブラリの依存管理理 2013/9/24 (Ր)
Gruntの動作環境 •開発環境で使う •nodeが動けば動く。Macでも、 Windowsでも、Linuxでも •今回はクライアントMacでデモ •サーバ上での開発で使⽤用しても まったく問題なし 2013/9/24 (Ր)
•デザイナーがMacで制作、Sublime Text を使⽤用して⿊黒い画⾯面でGruntを利利⽤用 •エンジニアがターミナルから接続した開発 ⽤用サーバ上でプログラミング、そこで Gruntを利利⽤用 例例えばこんなシチュエーション 2013/9/24 (Ր)
•Gruntは枠組みだけ、実態はプラグイ ンで、これをどう使うか。 •http://gruntjs.com/plugins •公式 25 •全体 1390 ※npm search gruntplugin
| wc -‐‑‒l 調べ 2013/9/12現在 Gruntプラグイン 2013/9/24 (Ր)
• 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 (Ր)
様々なコンバート処理理 nodeunit uglifyjs 2013/9/24 (Ր)
• 開発、運⽤用において、「コードを書く以外」でやっている⼿手間ありま せんか? • コンパイル、ビルドのコマンド実⾏行行 • Sass(SCSS,less)を変換、CoffeeScriptを変換 • 本番配布⽤用に画像の圧縮、JSの難読化、CSSのミニファイ •
規則正しく予想できるファイル名(card1.png,card2.png,...) へ直接アクセスされないように隠蔽するのにハッシュのリネーム • CDNのキャッシュをクリアするために⾛走らせているコマンド • srcにパラメータ付与、ファイル名変更更、等 • テストの実⾏行行 • Lint, シンタックスチェック, UNITテスト,等 • その他、無限の可能性が...!!! Gruntの使いどころ 2013/9/24 (Ր)
•1.開発環境へnode、Gruntを導⼊入 •ちなみに本番運⽤用サーバへnodeを⼊入れる必要は ありません!あくまで開発⽀支援で使うのみです。 •2.プロジェクトリポジトリへGruntfile.jsと package.jsonを⼊入れて、node_̲modules を.gitignoreに⼊入れる •3.各開発環境では npm install を実⾏行行して
node_̲modules以下にGruntプラグインを構築 Grunt導⼊入までの流流れ 2013/9/24 (Ր)
# node͕ೖ͍ͬͯΔલఏ % npm -g install grunt-cli % mkdir ~/hoge
% cd ~/hoge % npm install grunt --save 1.開発環境へGruntを導⼊入 npmのお作法により、プロジェクトごとにインストールする 2013/9/24 (Ր)
•Gruntfile.js •Gruntの設定ファイル •package.json •Gruntで使⽤用するプラグインのパッ ケージ管理理&依存管理理 2.プロジェクトへ Gruntfile.js と package.json
を設置 2013/9/24 (Ր)
% npm install 3.node_̲modules以下に Gruntプラグインを構築 package.json 正しく書かれていれば node_̲modules ディレクトリ 以下にプラグインがインストールされます。
2013/9/24 (Ր)
Gruntデモ ソース公開してます https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒yapc 2013/9/24 (Ր)
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 (Ր)
Gruntで構⽂文チェック •本⽇日の例例 •grunt-‐‑‒contrib-‐‑‒csslint •cssの構⽂文チェック •grunt-‐‑‒contrib-‐‑‒jshint •JSの構⽂文チェック ※チェッカの設定はGruntfile.js内 Optionsで細かく指定できます。 2013/9/24 (Ր)
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 (Ր)
※開発⽤用と本番⽤用でDocumentRoot またはstaticディレクトリを 切切り替えるようにすると捗ります。 2013/9/24 (Ր)
開発確認⽤用 ・読みやすいJS ・読みやすいCSS デプロイ⽤用 ・難読化したJS ・圧縮化したCSS Write Code ・CoffeeScript ・Sass(SCSS)
ࢀরઌͱ͔%PDVNFOU3PPUΛΓସ͑ /** * 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 (Ր)
GruntでPerl! •本⽇日の例例 •grunt-‐‑‒perllint YAPCのために作ってみた •Perlの構⽂文チェック 2013/9/24 (Ր)
例例:Perlのソースを監視して 構⽂文チェックを⾛走らせる 2013/9/24 (Ր)
例例:Perlのソースを監視して 構⽂文チェックを⾛走らせる grunt-‐‑‒watch でソースの変更更を監視して perl -‐‑‒wc を grunt-‐‑‒perllint を介して実⾏行行する =
2013/9/24 (Ր)
その他のPerlプラグインは? •Gruntで •ユニットテストしたい •コーディング規約のチェックしたい •perldoc出したい •etc... 2013/9/24 (Ր)
2013/9/24 (Ր)
Gruntプラグインを 作ってみよう 2013/9/24 (Ր)
•例例:grunt-‐‑‒watchでソースの変更更を監 視してTest::Moreをgrunt-‐‑‒perlunit を介して実⾏行行する •「こんなのあるかな?」と思ったプラ グインは存在するけどなければ作れば いい Gruntプラグインを 作ってみよう 2013/9/24 (Ր)
• まずgruntプラグインを漁った • grunt-‐‑‒hash • grunt-‐‑‒md5 • grunt-‐‑‒hashmap • grunt-‐‑‒rev
• grunt-‐‑‒rev-‐‑‒md5 • ちょっと違った • 作って公開した • そしたら… grunt-‐‑‒md5filename 開発の経緯 IUUQTHJUIVCDPNJTIJLBXBNHSVOUNEpMFOBNF 2013/9/24 (Ր)
IUUQTHJUIVCDPNHSVOUKTHSVOUDPOUSJCJTTVFT 2013/9/24 (Ր)
Gruntプラグインのファイル構成例例 • Gruntfile.js • package.json • README.* • LICENSE-‐‑‒* •
tasks/ • node_̲modules/ • .git • .gitignore • .npmignore • .travis.yml • test/ • tmp/ 2013/9/24 (Ր)
Gruntプラグインの開発にも Gruntを使います 2013/9/24 (Ր)
% npm init #package.jsonΛੜ % npm publish #ެ։ʂ % npm
info hoge #npmʹొ͞ΕͨͷΛ֬ೝ ⾃自作gruntプラグインをnpmに\公開/ たったこれだけ! 2013/9/24 (Ր)
2013/9/24 (Ր)
Grunt利利⽤用のコツ •watchに頼らない •あくまで簡易易で即チェック •manualを定義しておいて、コミット 前に実⾏行行する 2013/9/24 (Ր)
grunt-‐‑‒contrib-‐‑‒watch •ファイルの変更更を監視して、Gruntタ スクを開始します。 • Live Reload もできます。 • 連携すればGrowlで通知もでき ます。(grunt-‐‑‒notify)
ただしデプロイ前はgrunt manualで 2013/9/24 (Ր)
Gruntで楽しい コーディングライフを!! 2013/9/24 (Ր)
本⽇日のサンプルはGithubで 資料料はslideshareで 公開してます。 http://www.slideshare.net/mishikawa55/2013-‐‑‒yapc https://github.com/ishikawam/grunt-‐‑‒sample-‐‑‒yapc 2013/9/24 (Ր)
以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (Ր)
以上、ご清聴 ありがとうございました! @M_̲Ishikawa 2013/9/24 (Ր)