Sublime Text3でコーディングスピードアップ
SCSSのコンパイル速度がおそい
１年ぐらいgulpを使っていて、コンパイルに３～１０秒ぐらいかかってしまい、作業テンポが非常に悪い状態でした。scssを分割しすぎたせいもありますが。
そこで、以前から早いと聞いていたSublime Text 3 を使ってみたところ、0.2秒ぐらいでコンパイルし、非常に快適でしたので、しばらくこれで運用することにしました。
セットアップ含めて、プラグインなどをインストールした環境は次のようになりました。
LiveStyleが便利
プラグインは流行ものをいれました。
Sublime Text 3 + SCSS + LiveStyle + Google Chrome
LiveStyleとChromeがあれば、サーバーにアップしなくてもブラウザに自動で反映してくれるので、アップする手間が省けます。
構築方法についてはこちらを参考にさせてもらいました。
Sublime Text 3自体の構築方法については多くのサイトで紹介されているので、省略。
Sublime Text 3のプラグイン
Sublime Text 3でさらに作業スピードをアップするために、 自動補完や短縮コードでタグを呼び出せるプラグインをインストールしました。
必須なのはHTML5、SCSS、Emmet、Compassでしょうか。 あれもこれもとインスールしていると下表のようになりました。
| プラグイン名 | 内容 |
|---|---|
| HTML5 | 自動補完 |
| CSS Snippets | 自動補完 |
| SCSS | 自動補完 |
| SASS Build | Sass・ScssをコンパイルComapssをいれるなら不要 |
| Compass | Compassのスニペット、Compassのコンパイル |
| All Autocomplete | 自分で記入した関数や変数なども補完 |
| Tag | 閉じタグ を打つと補完 |
| Bracket | Highlighter 対応する括弧をハイライト |
| AutoFileName | imgタグのパスを入力する際、ファイル名を補完 |
| Browser Refresh | Opt+Ctrl+rでブラウザ更新 |
| SublimeLinter | リアルタイムで構文エラーを表示。別途、各言語のLinterが必要 |
| SublimeLinter-csslint | CSS用のLinter |
| SublimeLinter-html-tidy | HTML用のLinter |
| SublimeLinter-jshint | JavaScript用のLinter |
| SublimeLinter-php | php用のLinter |
| Goto-CSS-Declaration | Cmd+→でCSSの同じ単語にジャンプ |
| Emmet | CSSのスタイルの定義場所へジャンプ |
| YUI Compressor | コードの圧縮 Command+Bでビルド |
| Color Highlighter | “ha_style”: “Filled”,で色を可視化 |
| ConvertToUTF8 | 文字エンコードをUTF8に変換し、セーブした時にまた戻してくれる |
| Emmet LiveStyle | Developer Toolsから直接CSSを編集・反映ができる |
| Origami | ペインの分割（画面の分割） |
| ただ、全部sublime Text３に移行したわけではなく、スプライトシートの作成はgulpのspritesmithを使っています。 |
Live Styleが便利と書きましたが、gulpでコンパイルしなくなって速くなったと思うので、browser sync使えばいいかもしれませんが、まだ試してません。
Origamiの使い方メモ
使い方まよったのでメモ。
ペインの生成
cmd + k のあと → キー
ペインの複製
生成したあとにそのウィンドウで、cmd + k のあと option + → キー
ペインの削除
閉じたいパネルに移動して、cmd + k のあと、 shift + cmd + ← キーで消える