gulp

この記事では、omakeフォルダ内に同梱している、gulpについての説明をしています。

gulpフォルダ内のファイル一覧

• gulpfile.js
• package.json
• readme.txt

※このファイルだけではgulpは動作しません。あらかじめ、gulpを動かすためのnode.jsをインストールしてから、gulpをお使いのパソコンにグローバルインストールする必要があります。npm install --global gulp と入力することでgulpをグローバルインストールできます。

同梱しているgulpfile.jsにできること

• LESSのコンパイル
• LESSをScssへ変換
• Scssをコンパイル
• CSSを圧縮
• ライブリロード（ ※要Chromeのエクステンション）

以上の設定が、管理画面、site2015テーマ、blog2015テーマに用意されています。

LESSについて

管理画面内で使用しているacms-admin.cssや、CSSフレームワークとして配布しているacms.cssのLESSは、/themes/system/less/ に用意しています。

Scssについて

管理画面内で使用しているacms-admin.cssや、CSSフレームワークとして配布しているacms.cssのScssは、とくに gulpfile.js を使わなくてもScssとして利用できるように、/omake/scss/ にて用意しています。

CSSについて

LESSからコンパイルした管理画面およびCSSフレームワークのCSSは、/themes/system/css/ に、site2015テーマやblog2015テーマで使用しているものは/themes/各テーマ名/css/内に用意しています。

設置場所

gulpfile.jsおよびpackage.jsonをphpフォルダやthemesフォルダが設置してあるディレクトリと同じ位置に設置します。

注意点

お使いになるときは、ターミナルでgulpfile.jsおよび、package.jsonが設置してあるディレクトリに移動し、package.jsonの「devDependencies」に記述しているプラグインを npm install と入力し、インストールしてください。「devDependencies」に記述しているバージョンとは異なったバージョンをインストールされた場合、動作が正常に行われない場合があります。

---