Skip to content

Instantly share code, notes, and snippets.

@studiomohawk

studiomohawk/Build-Script-using-Jake.md

Created December 16, 2012 01:22
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save studiomohawk/4301918 to your computer and use it in GitHub Desktop.
Save studiomohawk/4301918 to your computer and use it in GitHub Desktop.
Download ZIP
Public Draft / Articles on editorial policy
Raw
Build-Script-using-Jake.md

パッケージ

LESS

akoenig/laessig

  • .lessファイルの保存時にLESSをCSSに変換。
  • laessig observe /the/path/to/your/file.less

CSS圧縮

ded/sqwish

  • sqwish styles.css
  • sqwish styles.css --strict / 重複するセレクタをマージ

CSS結合

cloudhead/less.js

  • master.lessなどに@importで全CSSファイルを呼び出す。
  • LESSのコンパイルで結合。

CSS シンタックスチェック

Command-line Interface · stubbornella/csslint Wiki

JavaScript圧縮

mishoo/UglifyJS

  • uglifyjs -o OUTPUT-FILENAME INPUT-FILENAME / ファイル名を変更
  • uglifyjs --overwrite INPUT_FILENAME / ファイルを上書き

JavaScript結合

ender-js/Ender

Ender / publishingでEnder用のパッケージの作成方法について書かれている。

疑問: repositoryは必須か？

JavaScript シンタックスチェック

jshint/node-jshint

その他

Ruby / Python / UNIXツール

  • Spritemapper / CSS Spriteの生成
  • gifsicle、libjpeg、optipng、pngcrushを使った画像最適化
  • rsyncでサーバにアップ

参考リンク

記事

リポジトリ

Raw
docpad.md

DocPadはnode.jsで動作する静的HTMLファイルジェネレータ。Jekyllのnode.jsバージョン。

インストール

(node.jsはインストールされているとして)

npm install -g -f docpad@6.2
docpad install

sudoが必要であれば適宜。

適当なディレクトリを作成して、
docpad run
とすると

{% highlight sh %} Which skeleton will you use?

  1. HTML5 Boilerplate
  2. Website
  3. Kitchensink
  4. Hogan
  5. No Skeleton {% endhighlight %}

というメッセージが表示される。大抵の場合は1か、5を選択することになる。
DocPadで何ができるのか実際に動かしてみたいという場合は3を選ぶといい。
DocPadはsrcというディレクトリにdocuments、files、layoutsというサブディレクトリを生成するが、それぞれがどんな役割を持っているか分からない場合は1〜4を選択するといいだろう。

ちなみにdocpad runはディレクトリに対して1度しか使えない様になっているっぽい。

この時点でhttp://localhost:9778/でDocPadが生成したサイトを閲覧できる。

プラグイン

DocPadにはすでに結構な数のプラグインが存在している。

プラグインのインストールはdocpad runを実行したディレクトリにcdして
npm install -f docpad-plugin-プラグイン名
としてインストール。
例えばstylusのプラグインであれば
npm install -f docpad-plugin-stylus
とする。

以下は個人的に使いそうなプラグイン達。細かい説明はそれぞれのReadmeを読んでほしい。

CLI

  • docpad cli

docpadのコマンドを利用できる。以下のコマンドを叩くのに利用。
このコマンドを実行した後は以下のコマンドからdocpadが必要なくなる。

  • docpad generate

HTMLを生成。

  • docpad watch

ファイルの変更を監視、変更に応じてHTMLを生成。

  • server

プレビュー用のサーバを立ち上げる。

src/documents、src/layouts、src/files

src/layouts

このディレクトリにはテンプレートにあたるファイルを格納する。
ecoというテンプレートエンジンを利用している場合は、[layout-name].html.ecoという名前でファイルを保存する。

例えばデフォルトテンプレートを作る場合は
default.html.ecoとなる。

{% highlight html %} <!doctype html>

<title><%= @document.title or "Joe Doe's Site" %></title> John Doe loves animals <%- @content %> Copyright 2012 John Doe. {% endhighlight %}

<%- @content %>にコンテンツが挿入される。

src/files

CSSやJavaScript、画像などを格納するためのディレクトリ。

例えばsrc/files/styles/style.cssというファイルはout/styles/style.cssというディレクトリに出力される。outディレクトリが生成済みのファイル群が格納される。

src/documents

このディレクトリにコンテンツを格納する。
src/documentsにindex.htmlというファイルを作成したとして、

{% highlight html %}

layout: default title: "John Doe loves animals"

My favorite animal : the cat !

written on 2012-05-19

Who doesn't love cats ?

{% endhighlight %}

のように記述すればいい。

---で囲まれている部分はメタデータを指定する箇所。
layoutはテンプレートを指定し、titleはタイトルを指定する。
ほかにもtags、content、ignored、dateなどを利用できる。
さらに自分でカスタムすることも可能。

先ほどのsrc/layoutsで示した<%- @content %>に上記のコンテンツが挿入される。

以上に加えて、
DocPadが提供しているビギナーガイドにかなり細かい部分まで解説してある。

Raw
Grunt-A-JavaScript-command-line-build-tool.md

Grunt: JavaScript用タスクベースのコマンドラインビルドツール。

  • concat / ファイルを結合
  • init / プロジェクトのscaffoldingをテンプレートから作成
  • lint / JSHintを利用したバリデーション
  • min / UglifyJSによる圧縮
  • qunit / QUnitによるテストをヘッドレスPhantomJSを利用して実行
  • server / ウェブサーバを立ち上げる
  • test / nodeunitを利用したユニットテストを実行
  • watch / 監視対象のファイルに変更があった場合にタスクを実行する

github

インストール

npm install -g grunt
qunitタスク用にPhantomJSが必要になるがnpmからはインストールができないため、 brew install phantomjsとbrewでインストールする。

使い方

gruntは実行したディレクトリ内のgrunt.jsというファイルを検索、なければ親ディレクトリと見つけるまで継続して検索し続ける。
grunt.jsにはプロジェクトの設定、呼び出すgruntのプラグインやタスクフォルダの設定、タスク、ヘルパそのものを記述する。

ベーシックなgrunt.jsファイルの例 {% highlight js %} module.exports = function(grunt) {

// プロジェクトの設定 grunt.initConfig({ lint: { all: ['grunt.js', 'lib//*.js''test//*.js'] }, jshint: { options: { browser: true } } });

// 呼び出すgruntのプラグインやタスクフォルダの設定 grunt.loadNpmTasks('grunt-sample');

// デフォルトタスク grunt.registerTask('default', 'lint sample');

}; {% endhighlight %}

あらかじめ設定されているjQueryプロジェクトのgrunt.js例

プラグイン

gruntによく使うタスクを追加する。

  • clean / ファイル、フォルダを削除
  • coffee / CoffeeScriptをJavaScriptにコンパイル
  • handlebars / handlebarsのテンプレートをコンパイル
  • jade / jadeテンプレートをHTMLにコンパイル
  • jst / underscoreのテンプレートをコンパイル
  • less / lessファイルをCSSにコンパイル
  • mincss / CSSを圧縮
  • stylus / StylusファイルをCSSにコンパイル
  • zip / ファイル、フォルダをzip圧縮

インストール: npm install grunt-contrib
タスクのロード: grunt.loadNpmTasks('grunt-contrib');

Backbone Boilerplateフレームワークツール。

インストール: npm install -g bbb
使い方: bbb init

cssmin、csslintという2つのタスクを追加できる。

インストール: npm install grunt-css
タスクのロード: grunt.loadNpmTasks('grunt-css');

Twitterが採用しているスタイルガイドチェッカrecessを利用出来る。

インストール: npm install grunt-recess
タスクのロード: grunt.loadNpmTasks('grunt-recess');

lint、LESSのコンパイル、結合タスクの例 {% highlight js %} recess: { dist: { src: [ 'src/main.css', 'src/component.css' ], dest: 'dist/combined.css', options: { compile: true } } } {% endhighlight %}

Require.jsをgruntでビルドするタスクを追加。r.jsオプティマイザーの利用も可。

インストール: npm install grunt-requirejs
タスクのロード: grunt.loadNpmTasks('grunt-requirejs');

{% highlight js %} requirejs: { dir: 'build', appDir: 'src', baseUrl: 'js', paths: { underscore: '../vendor/underscore', jquery : '../vendor/jquery', backbone : '../vendor/backbone' }, pragmas: { doExclude: true }, skipModuleInsertion: false, optimizeAllPluginResources: true, findNestedDependencies: true } {% endhighlight %}

LESSをCSSにコンパイル。

インストール: npm install grunt-less
タスクのロード: grunt.loadNpmTasks('grunt-less');

Gruntからシェルコマンドを実行。

インストール: npm install grunt-exec
タスクのロード: grunt.loadNpmTasks('grunt-exec');

{% highlight js %} grunt.initConfig({ exec: { remove_logs: { command: 'rm -f *.log' } list_files: { command: 'ls -l **', stdout: true } } }); {% endhighlight %}

gruntnのデフォルトwatchタスクで指定したファイルの変更に合わせてブラウザのリロードを行う。

インストール: npm install grunt-reload タスクのロード: grunt.loadNpmTasks('grunt-reload');

Amazon S3 アップロード/ダウンロード。

インストール: npm install grunt-s3

{% highlight js %} grunt.initConfig({

s3: { key: 'YOUR KEY', secret: 'YOUR SECRET', bucket: 'my-bucket', access: 'public-read',

// Files to be uploaded.
upload: [
  {
    src: 'important_document.txt',
    dest: 'documents/important.txt',
    gzip: true
  },
  {
    src: 'passwords.txt',
    dest: 'documents/ignore.txt',

    // These values will override the above settings.
    bucket: 'some-specific-bucket',
    access: 'authenticated-read'
  },
  {
    // Wildcards are valid *for uploads only* until I figure out a good implementation
    // for downloads.
    src: 'documents/*.txt',

    // But if you use wildcards, make sure your destination is a directory.
    dest: 'documents/'
  }
],

// Files to be downloaded.
download: [
  {
    src: 'documents/important.txt',
    dest: 'important_document_download.txt'
  },
  {
    src: 'garbage/IGNORE.txt',
    dest: 'passwords_download.txt'
  }
],

del: [
  {
    src: 'documents/launch_codes.txt'
  },
  {
    src: 'documents/backup_plan.txt'
  }
]

} }); {% endhighlight %}

Raw
Stylus.md

Stylus

LESS、Sassと同じカテゴリであるCSS Preprocessor。LESS、Sassから見ると後発で現在Versionは0.27.0。
node.jsで開発されていて、開発しているのは同じくnode.jsのMVCフレームワークとして有名なexpress.jsをリードしているTJ Holowaychuk氏。現在は彼が所属する会社LeanBoostによってレポジトリが管理されている。

Stylusの強みは後発であること。LESS、Sassという両雄がいるからこそ、両者のいいところを吸収してオリジナリティを出している。

{% highlight css %} body font 12px Helvetica, Arial, sans-serif

a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px {% endhighlight %}

StylusではSassの.sass形式での記述法よりもシンプルにセミコロンもコロンも、カッコもないもっともミニマムな書式でスタイルシートを記述することができる。
もちろん通常のCSSと同じ書式でも問題なく解釈されるし、両方が混ざっていてもきちんと解釈できる。

言語としての機能は少ないLESSはもちろん、CSSをプログラミング言語に近づけようとしているSassにも負けない機能を持っているのがStylusの特徴。

Mixinsはもちろん、@extendやカラー操作以外も可能なFunctions、DataURIすら自動で書き出せたりもする。

StylusがLESSやSassより優れている点がエラーのリポート。

{% highlight bash %} Error: /Users/tj/Projects/stylus/testing/test.styl:4 3: ' form input' 4: ' == padding 5px'

illegal unary ==

Error: /Users/tj/Projects/stylus/examples/error.styl:12 11: '' 12: 'body' 13: ' border-radius '5px'' 14: ''

expected a unit, but got string at ensure() (/Users/tj/Projects/stylus/examples/error.styl:2) at border-radius() (/Users/tj/Projects/stylus/examples/error.styl:5) at "body" (/Users/tj/Projects/stylus/examples/error.styl:10) {% endhighlight %}

エラーの行数どころか、どこにシンタックスエラーが発生しているか、原因が何なのかも通知される。非常に強力。

ツール

TJ Holowaychuk氏本人によるStylusで使えるCSS3拡張。Gradientsをはじめ現在利用出来るCSS3のプロパティをシンプルに記述できるようにするMixinsを追加できる。その他にもClearfixやposition、resetなど様々な機能を利用できる。

CSS SpriteをStylus内で生成できる拡張。libgdに依存。

{% highlight css %} .block-elm background: url(sprite.png) no-repeat sprite("star.png"); width: 25px; height: 25px; {% endhighlight %}

このような記述を

{% highlight css %} .block_elm{ background: url(sprite.png) no-repeat -25px -78px; width: 25px; height: 25px; } {% endhighlight %}

自動で上記のように処理できる。

シンタックス

近い将来、Stylusの全文を翻訳する予定です。7月以降着手。

Raw
Sublime-Text-2.md

インストール

dev buildをインストールして最新機能を使えるようにしておこう。
Sublime Text 2 - Dev Builds

プラグインをインストール

Sublime Package Control

Sublime Text 2をインストールし終えたらまずはじめにやっておくべきことがこのSublime Package Controlをイントールすること。

Sublime Text 2をスタートしてControl + `(View → Show Console)としてConsoleを立ち上げて

{% highlight py %} import urllib2,os; pf='Package Control.sublime-package';ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' {% endhighlight %}

この文字列をコピー&ペーストしてSublime Text2を再起動すれば完了。
Package ControlはControl + Shift + pでCommand Palleteを立ち上げて、installをタイプしてみよう。
するとPackage Control: Install Packageのオプションがハイライトされるのでエンター。
探しているプラグイン名をタイプしてエンターすればプラグインのインストールが開始される。

Command PalleteからでもPackage Controlで管理されているプラグインを一覧できるが、若干読みづらいと思うのでウェブ上で登録されているプラグインをみることができるこちらを参考に。現時点で411のプラグインが登録されている。

ショートカット

覚えておきたいショートカット

  • Control + Shift + p / Command Paletteを立ち上げる

Command PaletteからSublime Text 2の様々な機能やスニペットを検索できます。Package Controlもここからアクセスできる。

  • Command + p / ファイルファインダを立ち上げる

現在開いているファイルやフォルダ、プロジェクト内をキーワードでファイルを検索、開く。

  • Command + Control + G / Multi-Select

文字列を選択してからこのショートカットを入力するとファイル内にある文字列から選択した文字列と同じ文字列が選択される。この状態で編集するとすべての文字列が置き換えられる。

  • Command + Shift + a / Expand Selection To Tag

カーソルのある部分からHTMLのタグ範囲を選択するショートカット。

  • Command + Option + 1

単一ウィンドウに切り替え。

  • Command + Option + Shift + 2

ウィンドウを縦に分割。

  • Command + /

コメントをトグルする

  • Option + Control + f

Tag プラグイン導入済みの場合。
選択範囲でHTMLタグをフォーマットする。

念のため以下にMacのショートカットキーのシンボルを。

  • ⌘ Command キー
    • ⌥ Alt / Option キー
    • ⌃ Control キー
    • ⇧ Shift キー
    • ↩ Return / Enter キー

設定

Sublime Text 2ではEmacsやVimのように設定ファイルを編集することで設定を変更できる。Preferences → Settings - Defaultを開いて、変更したい部分をコピーしてから、Preferences → Settings - Userにペーストして設定を変更しよう。

同様にキーバインドもPreferences → Key Bindings - Defaultを開いて、変更したい部分をコピーして、Preferences → Key Bindings - Userにペーストして設定を変更できる。

どちらの設定ファイルもJSON形式で書かれているので編集はそれほど難しくない。

おすすめプラグイン

Sublime Text 2のプラグインの中で最も重宝するのがこのプラグイン。
SublimeLinterはcsslint、jshint、PythonやRubyなどのlintプログラムをリアルタイムに実行してくれる。Package Controlからインストールできる。

その名の通りファイル名の自動補完をSublime Text 2のデフォルトの自動補完機能に追加するプラグイン。
ちなみに自動補完の起動はcontrol + space

HTML、CSSをより早く記述するのに便利なZen Coding。Package Controlから直接はインストールできなかったので、Package Control: add repositoryからhttps://bitbucket.org/sublimator/sublime-2-zencodingを追加してインストール。

div.textのようないつもの記述をtabでExpandしてくれる。他のコマンドについては~/Library/Application\ Support/Sublime\ Text\ 2/Packages/ZenCodingのkeymapを確認できる。

jQueryの関数達を自動補完してくれる。
jQueryチームのメンバー数名が作成したというだけあって信頼できるプラグイン。

CSS3のブラウザベンダープリフィックスを補完してくれるウェブサービスNettuts+ Prefixrを直接利用できる。Package Controlからインストール可能。

補完したいルールセットを選択してCommand + Control + x で実行。

HTMLに関する様々な機能を拡張するプラグイン。
スラッシュで自動的にタグを閉じる、タグのインデントなどを追加。 インストールはPackage Controlから。

TODOやNOTE、FIXMEなどのような文字列をコメント内に残しておいて、それらのみを検索し別ウィンドウで開いてナビゲーションできる。
利用には若干設定が必要だがこちらを参照してほしい。Preferences - Settings Userから設定ファイルを開いて、リンク先の11行目から25行目までをコピーして、既存の設定の後ろに追加。

Control + pからShow TODOsとタイプするとShow TODOs: Project and open filesという補完があるはずなのでエンターで別ウィンドウで結果が表示される。

JavaScriptのフォーマットをhttp://jsbeautifier.org/のツールで整えてくれるプラグイン。
readmeにはcontrol + Option + fでプラグインを利用出来るとあるが、Tagプラグインと競合していて動作しないのでCommand PaletteからFormat: Javascriptで実行している。

Nettus+が作成したFetchプラグイン。
jQueryやnormalize.cssなどの単体ファイルの最新版をいつもgithubに取得しに行っていたり、自分で作成したパッケージをzipにしていたりする場合はそれらを設定しておけばこのプラグインで取得出来る。
zipファイルは自動で解凍される。

(),[],<>,{}、HTMLタグを強調表示。(HTMLタグはややバグっぽい挙動もある様子)。
インストールはPackage Controlから。

Command Palleteから直接gitコマンドを利用できるようにするプラグイン。
インストールはPackage Controlから。

Sublime Text 2のサイドバーからGitコマンドを実行できるようにするプラグイン。
インストールはPackage Controlから。

Sidebarに削除、実行などの機能を追加するプラグイン。
ファイルを別のアプリケーションで開く、という設定もできる。 Packageまわりは少しバグがあるようでほぼ動作しない様子だがかなり便利。
こちらもPackage Controlから。

LESSファイルのシンタックスハイライタ。
LESSを保存と同時にコンパイルするプラグインもあるが、私は別プロセスで処理しているのでハイライタだけ利用。
Package Controlから。

少々ややこしいネーミングながらgithubのgistをSublime Text 2から利用できるようになる。
Command Palleteからgistの表示、gistへの投稿などを行うことができる。
Package Controlから。

Vimモードに近しいVintageモードに変更するとCommand Modeの際にカーソルの位置が分かりづらくなるのでこのプラグインで解決。
私の環境ではPackage Controlからはインストールできなかったので、直接PackageへCloneした。

Vimで使えるちょっと便利なコマンドをエミュレートするプラグイン達。
好きなものを選んで利用中。
Package Controlからはインストールできないので、Packagesディレクトリに直接cloneした。

Tips

  • Vim風キーバインドに変換する

Command PaletteにてPackage Control: Enable Packageを選んでエンターしてVintageモードを有効にする。

  • TextMateのカラースキームを利用する

Sublime Text 2ではTextMateの.tmbundleファイルを利用することができます。またカラースキームファイルも利用可能。
packageフォルダ直下に.tmbundleをコピーしてSublime Text 2を再起動すればメニューからカラースキームを選択できる。
私が現在使っているのはTomorrow ThemeのNight Eighties。

  • HTMLファイル内をIDやClass名で移動する

Command + Pでファインダを立ち上げ、#を入力するとHTMLからID名、Class名などを検索できる。

  • 行番号に移動する

Control + gでも移動できるが、Command + pから:を入力し行番号をタイプしても移動できる。

  • TerminalからSublimeを起動する

/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin にあるsublをbinなどにsymlinkすればOK。

{% highlight sh %} sudo ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /bin/subl {% endhighlight %}

  • Sublime Text 2の設定の同期

Sublime Text 2の設定は
~/Library/Application Support/Sublime Text 2/
に保存されているので中にあるディレクトリをDropboxに移動しsymlinkすればOK。

{% highlight sh %} cd ~/Library/Application Support/Sublime Text 2/ {% endhighlight %}

ディレクトリに移動して Dropboxに作成した/appdata/sublime/に元々あったディレクトリを移動。

{% highlight sh %} ln -s ~/Dropbox/appdata/sublime/Installed\ Packages ./Installed\ Packages ln -s ~/Dropbox/appdata/sublime/Packages ./Packages ln -s ~/Dropbox/appdata/sublime/Pristine\ Packages ./Pristine\ Packages {% endhighlight %}

以上でDropboxに置いた設定ファイル群から~/Library/Application Support/Sublime Text 2/にsymlinkできる。
Sublime Textは閉じたままで作業しよう。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment