compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう

compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう

最近はsassやcompassに関する記事ってかなり目にするようになりましたよね。書籍も本屋さんに置いてあったりして、注目度の高さが伺えます。sassやcompassを使用する際には必ずコンパイルが必要になりますよね。今回はgulp(タスクランナー)を使って自動化しちゃいましょう。
そこまで設定するのって結構、手順が多いので僕もよく忘れるんですよね。なので忘れないように覚書です。ではcompass(scss)で書いてgulpでコンパイルするとこまでやってみることにしましょう。

何はともあれsassをインストール

もし今回が初めてsassを使うという方は、まずはインストールからになります。さらに、初めての方の場合sassの書き方を勉強していないと厳しいかもですね。

というわけで、すごくわかりやすくsassの導入から使い方までまとめてくれている記事をご紹介します。

参考:これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)

さらに今回はcompassもインストールしないとね

compassを使うとreset.cssやらもついてるし、角丸とかも楽チンだし、clearfixも簡単に使えるし、ってことで今回はcompassを使ってみたいと思います。
以下の記事がインストール時参考になると思います。

参考:CSSの常識が変わる!「Compass」の基礎から応用まで!

インストールは無事できましたか?今回の作業にかかわらずsassとcompassを使えるようになるとcssが今よりずっと楽になるのでぜひインストールしておきましょう。

ではでは、実際にgulpを使ってcompassのコンパイルとCSSの圧縮の手順に進みます。

1,まずはcompassでプロジェクトの作成

compassを使ってプロジェクトを作成します。簡単なコマンドでできるので今回で覚えちゃいましょう。

ターミナルを使って任意のディレクトリにdemoというプロジェクトをつくります。
以下のコマンドを打ちましょう。

compass create demo

下の画像のように「demo」というcompassプロジェクトが作成されたかと思います。

作成されたcompassプロジェクト

ちょっと寄り道で

実はcompassでプロジェクト作成したままだとsassのキャッシュがどんどん作られてしまうですよ。チームでGitHubとか使っていると結構邪魔なんですよね。毎回毎回、更新入ってしまってめんどくさいので消しちゃってもいいです。(おそらく問題なし)

んで、それだけだとまだキャッシュができてしまうのでconfig.rbに

cache = false

を書き加えましょう。これでキャッシュが生成されなくなります。

では、本編にもどりますね。

gulpについて

gulp

では、つぎにgulpのインストールをします。
ところで、gulpってみなさんご存知ですか?最近、注目されているnode.jsを使ったタスクランナーなんですよ。

タスクランナーっていえばgruntが有名ですよね。gulpはgruntよりも後にできたタスクランナーなんですが、gruntと同じようにsassのコンパイルやcss、jsの圧縮もできます。もちろん他にもいろんなことができます。さらに、gruntよりも動作が速いらしい。僕は正確に比較はできてないです。

作業を自動化できるタスクランナーはフロントエンドの開発には必須なんではないでしょうか。

2,Node.js をインストール

node.js

gulp はNodo.jsを利用しているので、node.jsの公式サイトからインストールしてください。

3,package.json を作成

先ほど作ったdemoプロジェクト内にgulpをインストールします。

ではターミナルでdemoディレクトリにいきましょう。
そしたら、以下のコマンドを打ちます。

npm init

なにやらいろいろ入力してねと出てきますが、全部EnterでOKです。そして「demo」ディレクトリ内にpackage.jsonができていると思います。

4,gulpをインストール

やっと本題のgulpをインストールします。以下のコマンドを打つだけなのですが、Macの場合はちょっとコマンドが変わります。

npm install gulp --save-dev

Macの場合

sudo npm install gulp --save-dev

gulpプレジェクトつくったら
ファイルができていることを確認しましょう。

5,サンプルのscssファイルを作成しよう

demo/sass/にsample.scssファイルを作成しましょう。
せっかくcompassを使用しているので、comapssのresetを呼び出すつつ適当なcssを記述してみましょう。

@import "compass/reset";

h1{
	font-size:1.2em;
}

6,gulpfile.js の設定 gulp-compassのインストール

gulpでcompassのコンパイルができるようにgulp-compassというプラグインをインストールします。

sudo npm install --save-dev gulp-compass

もし正常にインストールされている場合は、package.jsonにgulp-compassが追記されているはずです。

7,gulpfile.js を作成する

demoディレクトリ直下にgulpfile.jsを作成してください。「package.json」とは違い自動で作成されないので、手動で。

gulp設定2

7-1,gulpを呼び出す

gulpを使うために一行目に下のコードを記述します。

var gulp = require('gulp');

7-2,gulp-compassを呼び出す

今度は先ほどインストールしたgulp-compassを使える状態にします。

var compass = require('gulp-compass');

7-3,compassのコンパイルをするタスクを作成する

タスクを作成します。gulpに行ってもらうお仕事を作成する感じです。

// compass
gulp.task('compass', function(){
    gulp.src('sass/**/*.scss').pipe(compass({
        config_file: 'config.rb',
        comments: false,
        css: 'stylesheets/',
        sass: 'sass/'
    }));
});

簡単に説明をすると

sassディレクトリ内にあるscssファイルに対してコンパイルしてcssファイルをstylesheetsディレクトリに保存する。
っていうタスクを「compass」っていう名前で登録します。

こんな感じでかけていればOKです。

var gulp = require('gulp');

var compass = require('gulp-compass');

// compass
gulp.task('compass', function(){
    gulp.src('sass/**/*.scss').pipe(compass({
        config_file: 'config.rb',
        comments: false,
        css: 'stylesheets/',
        sass: 'sass/'
    }));
});

8,試しにコンパイルしてみる

ちゃんとできているかテストしてみましょう。

ターミナルに

gulp compass

って打ってみましょう。するといろいろ出てきますが、最後に

write stylesheets/sample.css

と出ていればコンパイルができているはずです。
stylesheetsディレクトリを確認してみましょう。

9,保存したら自動でコンパイルできるようにする

このままだといちいちコマンド打たないといけないのでめんどくさいですよね。なので、scssファイルを変更・保存をしたら自動でコンパイルするようにgulpfile.jsを書き換えましょう。

var gulp = require('gulp');

var compass = require('gulp-compass');

// compass
gulp.task('compass', function(){
    gulp.src('sass/**/*.scss').pipe(compass({
        config_file: 'config.rb',
        comments: false,
        css: 'stylesheets/',
        sass: 'sass/'
    }));
});



/**
 * watch
 * watchでcompassを自動で書きだす
 */
gulp.task('watch', function(){
    gulp.watch('sass/**/*.scss', function(event) {
        gulp.run('compass');
    });
});
 
gulp.task('default', function(){
    gulp.run('watch');
});

コード下の方にあるwatchの部分から書き加えてくださいね。
watchっていうタスクを使うとgulpが常に監視をしてくれるようになります。

さらにdefaultというタスクにwatchタスクを登録します。そうすることで、コマンドでgulpと打つだけで監視が始まるようになります。

では

gulp

としてみましょう。

[12:41:10] Starting 'watch'...
[12:41:10] Finished 'watch' after 10 ms
[12:41:10] Finished 'default' after 11 ms
[12:42:00] Starting 'compass'...
[12:42:00] Finished 'compass' after 5.32 ms

こんなかんじになっていればOKです。
実際にscssファイルを変更してみてちゃんとコンパイルされるか確認してみてくださいね。

ちなみに、gulpをstopするときはcontrol + cでできます。

10,cssの圧縮もgulpで

じつはここまでやった「変更・保存されたらコンパイル」ってcompassのもともとの機能でこちらも「watch」っていうのがあるのでgulpを使わなくてもできます。
ですが、gulpを使うことで他のタスクも自動で行えるようになるんです。ようは、プロジェクトに合わせていろいろカスタマイズできるんです。

今回はさらにcssファイルの圧縮もgulpでやってみましょう。

11,gulp-cssminプラグインとgulp-renameプラグインのインストール

今回は圧縮するためにgulp-cssminプラグインを
さらにファイル名に「.min」を加えるためにgulp-renameプラグインをインストールします。

npm install --save-dev gulp-cssmin gulp-rename

12,gulp-cssminプラグインとgulp-renameプラグインを使えるようにする

先ほどgulp-compassでもやりましたね。以下のコードを記述してプラグインを使えるようにしましょう。

var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

13,cssminのタスクを作成

cssminのタスクを作成します。
今回は、stylesheetsディレクトリにあるcssファイルを「なんとか.min.css」にリネームをしてcssminディレクトリに保存をします。

// css-min
gulp.task('cssmin', function () {
  gulp.src('stylesheets/*.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('cssmin'));
});

心配なかたは

gulp cssmin

でちゃんと動くか確認してみましょう。

13,cssminタスクをwatchに追加

cssminタスクも監視できるようにwatchに追加しましょう。

/**
 * watch
 * watchでcompassを自動で書きだす
 */
 // Watch
gulp.task('watch', function(){
    gulp.watch('sass/**/*.scss', function(event) {
        gulp.run('compass');
    });
    gulp.watch('stylesheets/**/*.css', function(event) {
        gulp.run('cssmin');
    });
});

完成形はこちら

var gulp = require('gulp');

var compass = require('gulp-compass');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

// compass
gulp.task('compass', function(){
    gulp.src('sass/**/*.scss').pipe(compass({
        config_file: 'config.rb',
        css: 'stylesheets/',
        sass: 'sass/'
    }));
});


// css-min
gulp.task('cssmin', function () {
  gulp.src('stylesheets/*.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('cssmin'));
});



/**
 * watch
 * watchでcompassを自動で書きだす
 */
 // Watch
gulp.task('watch', function(){
    gulp.watch('sass/**/*.scss', function(event) {
        gulp.run('compass');
    });
    gulp.watch('stylesheets/**/*.css', function(event) {
        gulp.run('cssmin');
    });
});
 
gulp.task('default', function(){
    gulp.run('watch');
});

まとめ

今回はgulpを使ったcompassのコンパイルの自動化を記事にしました。僕も仕事でよく使いますし、チームで作業するときもかなり役にたちます。今後こういったタスクランナーはもっともっと需要がのびてくるのではと思っています。

gulpを使うと他にもいろいろ自動化することができるようになります。僕もいろいろ試してみていいものがあればまたご紹介しますね。
では、よきgulpライフを。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

同じカテゴリーの記事

ページの先頭へ