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
100
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
ishikawam
0
140
WebPayのCheckoutHelper が超便利!!! って話
ishikawam
0
130
IPtalkの使い方
ishikawam
0
530
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
ishikawam
0
240
Other Decks in Technology
See All in Technology
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
2025年夏 コーディングエージェントを統べる者
nwiizo
0
170
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
テストを軸にした生き残り術
kworkdev
PRO
0
210
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
330
Agile PBL at New Grads Trainings
kawaguti
PRO
1
440
KotlinConf 2025_イベントレポート
sony
1
140
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
430
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
11k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Statistics for Hackers
jakevdp
799
220k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 (Ր)