Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

gulpで自動css生成


保存後にコンパイルするのがめんどくさい。

この前、bootstrap-sassをSublimeTextをつかってコンパイルする方法を、記事に書きました。
SublimeTextでBootstrapテーマをカスタマイズ
しかし、わざわざ保存したあとにコンパイルするのはめんどくさくないですか??
そこで今回は、保存と同時に自動でコンパイルをかけてくれる仕組みをgulpを使って、導入しました。
前の記事を読んでいることを前提で話を進めていきます。

gulpとは....

gulpとはストリーミング・ビルド・システムのことで、scsstype scriptなどのビルドが必要な言語をビルドしてくれるシステムです。
コードの圧縮なども行ってくれます。
しかし、gulpの導入にはNode.jsが必要です。
まず、Node.jsからダウンロードしましょう

Node.jsをダウンロード

Node.jsとは、サーバサイドのプログラミングをJavaScriptで動かすための言語です。
わたしもNode.jsをつかって、ゲームを作ってそれをサーバに保存できるサービス、Atlas エディタを公開しています。
近日新しいサービスをリリースする予定です。
Node.jsはこちらからダウンロード出来ます。
http://nodejs.org/



ここを押せばインストールがはじまるので簡単です。
次はいよいよgulpをダウンロードします。

gulpのダウンロード

Node.jsにはnpmとよばれるシステムがあり、このシステムを利用すれば、あの黒い画面からNode.jsを使ったモジュールをダウンロードできます。
gulpもその1つです。
さっそく、ターミナルを起動して、gulpをダウンロードしましょう
sudo npm install -g gulp
で完了です。
ちなみに-gグローバルインストールといい、
グローバルインストールを使えば、gulpにPC内からどこでもアクセスできるようになります。
ローカルインストールはそのフォルダ内だけで有効です。その場合は-gを外しましょう

gulpのプラグインもダウンロード

  1. gulp-sass
  2. gulp-minify-css

上の二つはscssのビルドに便利なので、導入しましょう。
npm install gulp-sass
npm install gulp-minify-css
で完了です。
npm install gulp-sassはsassのコンパイルに、
npm install gulp-minify-cssはcssの圧縮に使います。

gulpfile.jsを作成しよう

次にgulpfile.jsというファイルを作成してください。
このファイルをつかってどのファイルをどのような形式で、ビルドしたり圧縮したりするのかを決めることができます。
さっそく下のコードを見ていきましょう。

var gulp = require('gulp');
var sass = require('gulp-sass')
var minifycss = require('gulp-minify-css');
/*必要なモジュールの読み込み*/

gulp.task('sass', function () {
    gulp.src('./*.scss')/*拡張子がscssのファイルを探す*/
        .pipe(sass())/*そのファイルをcssに変換*/
        .pipe(minifycss())/*cssを圧縮*/
        .pipe(gulp.dest('../css'));/*その保存先を決めて保存*/
});

gulp.task('watch', function() {/*scssを監視*/
    gulp.watch('./*.scss', ['sass']);
    /*拡張子がscssのファイルに変更があれば、gulp.task('sass')を実行*/
});

ディレクトリ構造

念のため、上のソースコードがどのようなディレクトリ構造で動いているかを下に図で示します。



今回はbootstrap.scssをコンパイルして上のcssディレクトリの中にbootstrap.cssというファイル名で保存されます。
この際に、gulpfile.jsbootstrap.scssと同じ階層に入れてください。

bootstrap.scssのコンパイル

ターミナルを開き、gulpfile.jsが置いてあるディレクトリに、cdコマンドで移動してgulp watchと入力してください。
これでbootstrap.scssを監視し、保存されたらbootstrap.cssとしてcssのディレクトリにも保存される仕組みが完成しました。
しかし毎回、ターミナルを開くのはめんどくさいですよね??
だから、Sublime Textビルド環境を構築しましょう

Sublime Textにビルド環境を構築

Sublime Textを開いて、下の図のようにNew Build Systemを押して,新しいビルド方法を定義しましょう


最初のコードは下のようになっているはずですから、それをその下のコードに置き換えてください。

{
	"shell_cmd": "make"
}
{
    "cmd": ["gulp","watch"],
    "selector":"source.scss",
    "path" : "/usr/local/bin",
}

scss.sublime-buildなどの名前をつけて保存しましょう
保存先はSublime Textが自動で決めてくれるので安心してください。

これで、command + Bで拡張子がscssの場合は自動的にSublime Textがターミナルの代わりにgulp watchを実行してくれます。
あとはscssを保存するだけで自動的にcssが生成されます。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド