「Sublime Text2」カテゴリーアーカイブ

WindowsにLess環境を作ってless2cssで保存時に自動生成させる

window from Verona
Windows環境でLessを使う時は winless を使ってlessファイルからcssファイルを生成していましたが、Sublime Text2の less2css というパッケージを使えば、lessファイル保存時に自動的にcssファイルを生成してくれるということを知ったのでless2cssを使うのに必要なlesscをWindowsにインストールした。

less.js-windowsをダウンロード

まずはlesscをダウンロード。
lesscはduncan smart氏の less.js-windows を使用します。

ダウンロードしたファイルを解凍すると duncansmart-less.js-windows-xxx という名前のフォルダ(xxxは数字)が出てくるので、ファイル名をless.js-windows等に変更してWindowsのパスが通っている場所に配置する。もし配置したい場所にパスが通っていなければ環境設定でその場所へのパスを指定する。
パスの指定は システムのプロパティ→詳細設定→環境変数 でシステム環境変数の Path に追加。

今回は直接less.js-windowsを指定しました。(例:E\lib\less.js-windows)

パスの確認

パスの確認はコマンドプロンプトで path と入力してエンターキーを押せば設定されているパスが表示されます。

コマンドプロンプトでcssファイルを生成する

パスが確認できればコマンドプロンプトを使ってless ファイルからcssファイルを生成します。

コマンドプロンプトを立ち上げてlessファイルが保存されているディレクトリへ移動する。
下のコマンドでlessファイルからcssファイルをコンパイルできる。

lessc [lessファイル名] [生成する.cssファイル名]

正しくパスが通っていればcssファイルが生成されます。

Sublime Text2にless2cssをインストールする

Package Controlを使ってless2cssをインストールします。Package Controlのインストールはこちらを参考にしてください。
Sublime Text2で楽にパッケージの管理ができるSublime Package Controlを入れてみた

ctl+shift+p でコマンドパレットを表示してPackage Control: Install Packageを選択、less2cssと入力すればインストールが始まります。

インストール完了後にSublime Text2を再起動してlessファイルを保存するとコンパイルされたcssファイルも同時に生成されるようになります。これは便利。

Sublime Text2で楽にパッケージの管理ができるSublime Package Controlを入れてみた

Sublime Text2
Sublime Text2でシンタックスハイライトなどのパッケージが必要になると、配布サイトからダウンロードして解凍してインストールという手順でしていましたが、パッケージの管理ができる Sublime Package Control を入れて使ってみたところ凄く便利だったので Installation – Sublime Package Control を基に手順とかを書いてみた。

Sublime Package Controlをインストールする

Sublime Package Controlをコンソールからインストールします。
手動でもインストールできますが、コンソールの方が楽なのでコンソールを利用しましょう。

手動インストールの手順はこちらからどうぞ。
Manual Instructions – Sublime Package Control

コンソールを表示する

Sublime Text2起動後に
ctrl+` または メニューバー View → Show Console でコンソールを表示して下のコードをペーストします。

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'

Sublime Text2を再起動する

ペースト後エンターキーを押すと再起動を促す下のメッセージが表示されるので

Please restart Sublime Text to finish installation

Sublime Text2を再起動します。

コマンドパレットを表示

再起動後は、
Mac OS Xは cmd+shift+p 、WindowsとLinuxは ctrl+shift+p でコマンドパレットが表示できるようになります。
またはメニューバーの Tools → Command Palette… でもコマンドパレットの表示が可能。
コマンドパレット

パッケージをインストールする

コマンドパレットを表示して、installと入力するとPackage Control: Install Packageという文字が表示されるので、エンターキーを押して選択。この状態でデフォルトチャンネルからパッケージがインストールできるような状態です。

目的のパッケージを探す

Package Controlを表示させて、入力欄に文字を入力すれば該当するパッケージ名を自動補完して抽出してくれます。

例えばPHP関連のパッケージの場合は、phpと入力するだけで該当パッケージを表示します。
コマンドパレットで自動補完

選択してインストール

パッケージを選択してエンターキーを押すと右下にインストール状況を表示するテキストが表示されて、インストールが完了すると successfully installed と表示されます。
インストール中はステータスバーに表示されます

パッケージコントロールで使用できるコマンド一覧

どんなコマンドが使用できるのか気になったので Sublime Package Control – Usage の超訳してみた。

Install Package

インストール可能なパッケージの一覧を表示します。このリストにはデフォルトチャンネルの全てのパッケージに加えてあなたが追加したデフォルト以外のリポジトリも含まれています。

Add Repository

デフォルトチャンネルに含まれていないリポジトリを追加します。これはユーザーがGitHubとBitBucket上のパッケージのインストールと自動的更新ができるようなります。GitHub上のパッケージを追加する場合は拡張子「.git」を除いたGitHubのURLを入力、BitBucketリポジトリはフォーマット https://bitbucket.org/username/repository を使用します。

Remove Package

このコマンドは該当パッケージフォルダを削除し、インストールされたパッケージリスト(Packages/User/Package Control.sublime-settings)からもパッケージ名を削除します。
Packages/User フォルダを別のマシンにコピーした場合は、installed_packagesリストがパッケージコントロールにインストールを自動的に許可します。

そのほかのコマンド :

Add Repository Channel

他のリポジトリのリストのチャンネルを追加します。あまり使わないかもしれませんが、共有するリポジトリのカスタムチャンネルを作ることができます。

Create Package File

パッケージ開発者向け。パッケージフォルダに.sublime-packageファイルを生成します。.sublime-packageファイルはWebにアップロードできpackages.jsonファイルを参照します。

Create Binary Package File

パッケージ開発者向け。ソースの.pyファイルを含まない代わりに.pycバイトコードを含む.sublime-packageファイルを作成します。商用パッケージを配布する際に便利です。

Disable Package

パッケージを無効にします。これはPythonスクリプトをロードしないようにするので.sublime-keymapなど他のファイルもロードさなくなります。

Discover Packages

Webブラウザでコミュニティパッケージリストを表示します。

Enable Package

無効にされたパッケージを有効にします。

Upgrade/Overwrite All Packages

すべてのパッケージを更新します。これにはパッケージコントロール経由でインストールされていないパッケージも含めて更新されます。独自パッケージを開発中は使わない方がいいかもしれません。

Upgrade Package

更新可能なパッケージのリストを表示します。リストから更新するパッケージを選択してください。

Package Control Settings – Default

デフォルト設定ファイルを開きます。このファイルはユーザー設定が変更する際に参照として使用されます。
パッケージコントロールが自動的/手動で更新されると変更された部分は消えます。

Package Control Settings – User

パッケージコントロールのユーザー設定を開きます。設定が変更されればこのファイルに反映されます。新しいバージョンのパッケージコントロールがインストールされても上書きされることはありません。

Sublime Text2のhot_exitという便利な機能

Sublime Text2

Sublime Text2のhot_exitは入力中の未保存ファイルも復元できる!

最近はPCが落ちることが少なくなったせいか、新規作成したファイルをマメに保存するのを忘れて入力を続けることが増えてきているんですが、この前久しぶりにPC落ちました。

その時は長文のテキストを保存せずに入力していたんですが、PCが落ちてからあー保存しておけば良かった…と後悔しながらPCを再起動してSublime Text2を開くと、先ほどまで編集していた未保存ファイルが復元されていました。

一度試しに再現してみようと思い、未保存ファイルを編集中にcommand+Qで終了させた後、Sublime Text2を起動してみると先ほどの編集中の未保存ファイルが表示されました。

どうやらこれはSublime Text2のhot_exitという機能のおかげみたいです。
Preference → Setting – Default で設定ファイルを開くと281行目あたりに説明がありました。

//
// Application Behavior Settings
//

// Exiting the application with hot_exit enabled will cause it to close
// immediately without prompting. Unsaved modifications and open files will
// be preserved and restored when next starting.
//
// Closing a window with an associated project will also close the window
// without prompting, preserving unsaved changes in the workspace file
// alongside the project.
“hot_exit”: true,

こまめに保存しとけばいい話なんですが、ちょっとしたメモ書きしているときも不意なアクシデントが起こっても安心ですね。hot_exitはありがたい機能。