際際滷

際際滷Share a Scribd company logo
直翫學席 / 廉x匯R
CodeKit で兵める
肝弊旗Web崙恬
直翫 學席
フロントエンドエンジニア
廉x 匯R
フロントエンドエンジニア
廉x 匯R
フロントエンドエンジニア
HTML / CSS
マ`クアップ
HTML5 / CSS3
スマ`トフォンサイト恬撹
JavaScript / Ajax
システム_k
???? では
恍定の6埖から
?Sass?をg佞秘
それまでは ...
よ`
わからん
\い鮫中
こわい
そんなオマエラの照弊麼。
それが
http://incident57.com/codekit/
オマエラでも芦伉。
わ`い
Outline
?C o deKitとは?
?S ass/LESS/Stylusのコンパイル
?C o mpassの旋喘
?C o ffeeScriptなどのコンパイル
?ブラウザのオ`トリロ`ド
?C o deKitで仏すWebサイト互堀晒
?プロジェクトの砿尖と慌嗤
?まとめ
What¨s CodeKit ?
宥械、CSSプリプロセッサの
旋喘は
キャラクタ`ユ`ザインタフェ`ス
Ruby Node
CUI
\い鮫中とか、
なにそれコワイ。
CodeKit なら
でも
グラフィカルユ`ザインタフェ`ス
GUI
インスト`ルするだけで
すべてのCSSプリプロセッサが
聞える
さらに
Blessを
徭啜弔砲ける
Compass / Bourbon
の旋喘
でも
お互いんでしょう
これだけの字嬬をBえて
なんと
10晩gのo喘辛 (C嬬崙oし)
$25
ズバリ
書のうちに頁掲
お返Xさを
ライブデモで
扮
プロジェクトを
Watch(O)させる
DEMO
と冱っても
CodeKit に D&D するだけ
ドラッグアンドドロップ
あとは CodeKit におまかせ
.scss .less .styl
CodeKit
シ?隠贋
お、厚仟
されたぞ
厚仟をO
.css 徭咾妊灰鵐僖ぅ
デモファイルのフォルダ撹
demo css
img
js
less
scss
styl
index.html
DEMO
Sass のコンパイル
scss フォルダに
style.scss を隠贋する
style.scss
style.cssdemo css
img
js
less
scss
styl
index.html
DEMO
LESS のコンパイル
DEMO
less フォルダに
style.less を隠贋する
style.less
style.cssdemo css
img
js
less
scss
styl
index.html
DEMO
Stylus のコンパイル
DEMO
styl フォルダに
style.styl を隠贋する
style.css
style.styl
demo css
img
js
less
scss
styl
index.html
DEMO
びっくりするぐらい
gですね
ちなみに
フォルダの了崔vSの譜協は筝辛嬬
コンパイル瘁に Bless をかけることも辛嬬
Compass の旋喘
DEMO
仟号に遺看馨沿温壊壊プロジェクトを恬撹する
屡贋のプロジェクトで遺看馨沿温壊壊を旋喘する
Compass をインスト`ルする
CompassをO協する
パス
にする
DEMO
だけじゃないんです。
安さん。
JavaScript の
ミニファイ?Y栽
猟隈チェック
CoffeeScript の
コンパイル
+
CodeKit でできること
Jade / Haml / Slim / Kit Language
のコンパイル
CodeKit でできること
CodeKit でできること
鮫騅釼m晒
フレ`ムワ`クの
鞠h?旋喘
ブラウザの
オ`トリロ`ド
チ`ムでの
プロジェクト慌嗤
DEMO
Co?eeScript のコンパイル
js フォルダに
script.coffee を 隠贋する
script.co?ee
script.js
demo css
img
js
less
scss
styl
index.html
DEMO
Kit Language のコンパイル
CodeKit 鏡徭の
HTMLライブラリC嬬
http://incident57.com/codekit/kit.php
index.kit
index.kit に
header.kit をインポ`トする
header.kit
index.html
インポ`ト
ブラウザのオ`トリロ`ド
DEMO
オ`トリロ`ドの譜協
CSS Nite LP26 CodeKitで兵める肝弊旗安艶恢崙恬
Adobe Edge Inspect
?Adobe から戻工されている
マルチデバイス_ka廁ツ`ル
?Mac/PCでのWebブラウジングを
スマ`トフォンなどに揖豚してくれる
?オ`トリロ`ドC嬬とMみ栽わせると
gC_JがとってもS
http://html.adobe.com/jp/edge/inspect/
DEMO
啝でごEください
https://vimeo.com/57296277
DEMO
JavaScript の
ミニファイ?Y栽
script.min.js
script.js
script.js をミニファイする
script.js
script.js に
jquery.js をY栽する
jquery.js
script.min.js
Y栽
ミニファイgファイル兆の譜協
DEMO
鮫騅釼m晒
より倔な鮫騅釼m晒ツ`ル
ImageOptim
ImageAlpha
JPEGmini
http://imageoptim.com/
http://pngmini.com/
http://www.jpegmini.com/
DEMO
プロジェクトの砿尖と慌嗤
プロジェクト譜協を嗤燭砲垢
プロジェクトごとの譜協をする
codekit-config.json
codekit-con?g.json を慌嗤する
git/svn/Dropbox など
メンバ`gで慌嗤
まとめ
?CodeKitならh廠Bがg
?徭啜弔Blessをかけられる
?Compass/Bourbonが旋喘できる
?JSのミニファイ?Y栽、鮫颪臨釼m晒も辛嬬
?CSS參翌のプリプロセッサにも
?オ`トリロ`ド + Edge Inspectで
スマ`トフォンでのgC_JもS?
?フレ`ムワ`クの鞠h?旋喘が辛嬬
?プロジェクトのO協は慌嗤できる
これだけの字嬬をBえて
なんと
$25
しつこいわね
まずは10晩g
おしください
コンパイルとか
ビルドとか
フロントエンドでも
駅勣なようです
CodeKit は怎がかり
gは、麿にもあります
Hammer
http://hammerformac.com/
MIXTURE
http://mixture.io/
まずは CodeKit で
肝弊旗のWeb崙恬を兵めよう
\い鮫中への除祇かも
寄嬋健、
伽くない
だって、\くないもん
@きの
易さ!!
ありがとうございました
直翫學席 / 廉x匯R
CodeKit で兵める肝弊旗安艶恢崙恬

More Related Content

CSS Nite LP26 CodeKitで兵める肝弊旗安艶恢崙恬