自分のMacにもタスクランナーである「Grunt」を入れたので、プライベートな開発でも作業の自動化が可能になっています。WordPressのテーマもローカルで開発していて、最近Gruntをテーマのディレクトリにインストールしました。今後は肥大化したstyle.cssをSASSで書いて、なおかつ機能ごとに分割させて効率良く開発していこうと考えており、今回Gruntを使っての開発環境を整えました。
Sassとは

SassはCSSのメタ言語です。IT用語辞典では、
プログラミング言語の仕様を取り入れて効率的にCSSを定義できるようにした言語で、変数や算術演算、セレクタ指定の入れ子(ネスト)、外部ファイルの読み込み、複数のCSS定義の結合(ミックスイン)など、CSSにはない機能を利用することができる
と説明されています。
Sassをインストールすることで、Sassファイル(.sass / .scss)をコンパイルしてCSSに変換することができるようになります。またコンパイルする際に複数のSassファイルを結合し、さらに圧縮(ミニファイ化)させることができるようになります。
以下のコマンドでSassをインストールします。(※SassをインストールするにはRubyがインストールされている必要があります。)
$ gem install sass
今回はタスクランナーの「Grunt」を使ってSassの処理の自動化を行っていきます。Gruntには、SassのコンパイルやCSSファイルの結合、圧縮してくれるプラグインがあります。SassをGruntで扱う方法を以下に紹介します。
WordPressテーマディレクトリにGruntを導入
まずGruntコマンドを使えるようにするために、Grunt-cliをシステムにインストールします。
$ npm install grunt -g
「Grunt-cli」や「Grunt」をインストールするには、Node.jsとそのパッケージ管理システムのnpmがインストールされている必要があります。詳細は以下を参考にしてください。
また、Gruntのインストールや使い方などは以下を参考にしてください。
Gruntをインストールするための準備として、WordPressのテーマディレクトリに移動し、[npm init]コマンドを実行して、「package.json」ファイルを作成します。
$ cd テーマのディレクトリ名
$ npm init
package.jsonファイルを作成したら、Gruntをインストールします。
$ npm install grunt --save-dev
Gruntのインストールが完了したら、Gruntで実行するタスクを書き込むための「Gruntfile.js」ファイルを作成します。$ touch Gruntfile.js
Sassファイルの準備
次にSassファイルを準備します。Sassファイルには、拡張子が「.sass」と「.scss」の2種類あります。最近ではcssの書き方に近い「.scss」がよく使われるようになってきているので、今回は「.scss」でSassファイルを作ります。
とりあえず、今回は以下の4つのscssファイルを準備しました。最終的にこの4つのファイルをWordpressテーマ用のstyle.cssに結合し、圧縮するようにしていきます。
- style.scss: 全体に共通部分のスタイル
- index.scss: インデックスページのスタイル
- single.scss: 記事ページのスタイル
- sidebar.scss: サイドバーのスタイル
GruntでSassを扱うための準備
Gruntプラグインのインストール
GruntでSassを扱うためのプラグインは以下となります。
- grunt-contrib-sass: Sassをコンパイルするプラグイン
- grunt-contrib-cssmin: CSSファイルを結合、圧縮するプラグイン
- grunt-contrib-watch: ファイル状態を監視するプラグイン
それぞれ以下のコマンドでプラグインをWordPressテーマのフォルダ内にインストールします。
grunt-contrib-sassをインストール
$ npm install grunt-contrib-sass --save-dev
grunt-contrib-cssminをインストール
$ npm install grunt-contrib-cssmin --save-dev
grunt-contrib-watchをインストール
$ npm install grunt-contrib-watch -save-dev
Gruntfile.jsにタスクを記述
それぞれプラグインのインストールが完了したら、Gruntfile.jsにタスクを記述していきます。
module.exports = function (grunt) {
grunt.initConfig({
// scssファイルをcssファイルにコンパイルするタスクを設定
sass: {
dist: {
options: { // Sassのオプションを設定
style: 'expanded' // Sassのコンパイル時の変換方法
},
files: [{
expand: true, // 特定のディレクトリの指定を許可
cwd: 'scss', // タスクを実行するディレクトリ
src: ['*.scss'], // タスクを実行するファイル
dest: 'css', // コンパイルしたcssファイルの置き場所
ext: '.css' // コンパイル後のファイル
}]
}
},
// コンパイルしたCSSファイルをstyle.cssに結合するタスクを設定
cssmin: {
minify: {
files: {
// 結合先のcssファイル名: 結合するcssファイル名
'style.css': [
'css/index.css',
'css/single.css',
'css/style.css',
'css/sidebar.css'
]
}
}
},
// ファイルの変更を監視するタスクを設定
watch: {
sass: {
// 監視するファイル
files: 'scss/*.scss',
tasks: ['sass']
},
css: {
// 監視するファイル
files: [
'css/index.css',
'css/single.css',
'css/style.css',
'css/sidebar.css'
],
tasks: ['cssmin']
}
}
});
// Gruntプラグインの読み込み
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// gruntコマンドを叩いた際に実行されるタスク
grunt.registerTask('default', ['sass', 'cssmin']);
};
Sassのコンパイル時の変換方法
上記のGruntfile.jsには、Sassのコンパイル時の変換方法がオプションとして設定してあります。grunt-contrib-sassのオプション「style」を指定すると、以下の4つのタイプに変換が可能です。
以下のscssファイルがオプションによってどのように変換されるか例を挙げてみます。
.item {
display: flex;
figcaption {
padding-left: 8px;
}
&__image {
flex: none;
}
}
「style: ‘nested’」で変換
.item {
display: flex; }
.item figcaption {
padding-left: 8px; }
.item__image {
flex: none; }
「style: ‘compact’」で変換
.item { display: flex; }
.item figcaption { padding-left: 8px; }
.item__image { flex: none; }
「style: ‘compressed’」で変換
.item{display:flex;}.item figcaption{padding-left:8px;}.item__image{flex:none;}
「style: ‘expanded’」で変換
.item {
display: flex;
}
.item figcaption {
padding-left: 8px;
}
.item__image {
flex: none;
}
grunt-contrib-sassのオプションについては以下をご参照ください。
Gruntを実行
以上でWordPressでSassを使う準備は完了です。以下のコマンドでタスクを実行します。
$ grunt
以下のコマンドを叩いてからファイルの更新を行うと、自動的にタスクが実行させるようになります。
$ grunt watch
Sassファイルが更新される度に、CSSファイルにコンパイルされ、圧縮された形でWordPressテーマ用のCSSファイルであるstyle.cssが生成されるようになります。生成されたstyle.cssは以下のとおりです。ちなみにファイル容量は19KBから12.5KBにまで減量することに成功しています。
まとめ
Sassを使えるようにして、Sassファイルのコンパイル、結合、圧縮などはできるようになりました。次はSassの構文を使ってcssを書いていきたいですね。特にSassを使うとBEMを取り入れたCSSもかなり書きやすくなるということなので、その辺りから挑戦していこうと思っています。
最後に今回参考にしたサイトと、Sassの本を紹介します。
著者: 平澤 隆, 森田 壮
出版社: インプレスジャパン
発売日: 2013年9月13日
ISBN: 4844334662
⇒Amazon.co.jpで詳細を見る
コメント