3は、多くのウエブ開発者からの支持を得ています。Bootstapは、元々lessというCSS拡張メタ言語で書かれており、lessで書かれたソースコードをコンパイルすることで、CSSを生成しています。今回は、CSSの記述やBootstrapのカスタマイズに無くてはならないless環境の構築方法について解説します。作業の前提条件は、下記のとおりです。1.4.1構築するサーバのスペックは、下記のとおりです。6.5-i386-minimalのBoxを起動し、LESSが利用可能なBoxを作成します。manパッケージのインストールminimal構成のCentOSには、manがインストールされていませんので、予めインストールしておきます。Manager)をgithubからインストールします。done.Node.jsのインストールnvmを使用して、Node.jsをインストールします。Manager)も一緒にインストールされます。v0.10.24.bashrcの編集Node.jsのインストールが終了したら、~/.bashrcを編集します。-vlessのインストールlessのインストールに必要なパッケージが全てインストールできましたので、npmを使ってlessをインストールします。form-data@0.1.2)グローバル環境にインストールされたパッケージを表示します。Compiler)がインストールされますので、lessファイルを作成してコンパイル確認します。}}CSSにコンパイルします。0.3);}-xオプションを付けると、圧縮された状態でコンパイルできます。rgba(0,0,0,0.3)}第二引数にファイル名を指定すると、指定されたファイルにコンパイル結果を出力します。sample.cssCSSコンパイルの自動化ここまでの作業で、LESS→CSSコンパイルのための環境は構築できましたが、LESSファイルを更新する度に、毎回コンパイルするのはやはり面倒ですので、gruntを使用してLESS→CSSコンパイルを自動化します。grunt-cliのインストールGruntは、JavaScriptで書かれた定義ファイル(Gruntfile.js)に定義されたタスクを実行するタスク監視ツールです。Gruntfile.jsにLESS→CSSコンパイルをタスクとして定義しておくと、LESSファイルが更新されると同時に、CSSにコンパイルされます。監視したいフォルダ(通常、プロジェクトごとのフォルダ)を作成し、initコマンドを実行して、package.jsonファイルを作成します。(yes)ハイライトで表示された13,18行目以外は、デフォルトでも構いません。package.jsonはいつでも修正できますので、全てデフォルトのまま作成し、後で修正しても構いません。Gruntのインストール--save-devオプションを付けて、Gruntコアパッケージをインストールします。オプションを指定すると、インストールされたパッケージをpackage.jsonに追加できますので、必ず指定しましょう。argparse@0.1.15)GruntプラグインのインストールGruntに追加するプラグインをインストールします。追加するプラグインは、下記のとおりです。JavaSctiptを圧縮します。指定されたタスクを監視します。LESSファイルをコンパイルします。自動化に必要なパッケージが全てインストールできましたので、Gruntfile.jsを作成してLESS→CSSコンパイルのためのタスクを定義します。grunt.loadNpmTasks("grunt-contrib-less");};12行目~15行目では、lessフォルダ下のLESSファイルをソースファイルに、cssフォルダを出力フォルダに指定しています。19行目~28行目では、lessフォルダ下のLESSファイルを監視する対象として指定しています。31行目~33行目では、実行するプラグインをロードしています。監視実行カレントディレクリに、lessおよび、cssフォルダを作成し、監視を実行します。&プロセスがバックグラウンドで実行され、Watchタスクが実行されている旨のメッセージが表示されます。taskWaiting...LESSファイル追加lessフォルダに先に作成したlessファイルをコピーすると、cssフォルダにCSSファイルが作成できます。less以上で、CSSコンパイルの自動化ができました。手順2の初期化以降の作業は、プロジェクトごとに毎回行う必要がありますので、注意して下さい。