幸せそうな人を見ると、転べって思います。@It_is_Rです。
Webページを制作するとき、sassをcssに変換して使用することが多いと思います。
今回は、gulpを使ってsassをcssにコンパイルする方法や、使う上で便利な方法を紹介していきたいと思います。
しかも、WEB開発初心者の方でもわかりやすく、インストールから詳しく書いていこうと思います。
Contents
gulpとは
gulpは、sassからcssのコンパイルを含め、様々なことを自動で行ってくれる、タスクランナーと呼ばれるものです。
ただ、導入には少し手順を踏まなくてはなりません。今回はその手順も含め、解説していきます。
まず、gulpインストールするには、npmというパッケージ管理ツールを使います。
npmは、Node.jsをインストールすることで同時にインストールされます。また、Node.jsのインストールにはHomebrewを使うこともできます。
Homebrewを使わなくてもNode.jsをインストールすることはできるのですが、HomebrewにはWeb開発での便利なツールが色々あるので、インストールしておくと後々役立つかもしれません。
また、後々記述するRubyのインストールなどにも、Homebrewを使用することもできます。
Homebrewのインストール
まず、Homebrewをインストールしてみましょう。
Homebrew
Homebrewのインストールには、上のリンクから画像の四角で囲まれた部分をターミナルに入力します。
詳しくは、「Homebrewを使いこなせ！Macへのインストールや使い方。」という記事をご覧ください。
Node.jsをインストール
Node.jsをインストールします。
※Homebrewを使用しない場合は、Node.jsのページからダウンロードすることも可能です。
では、Homebrewを使ってNode.jsをインストールしてみましょう。
コマンドをターミナルに入力します。
$ brew install node
これでNode.jsがインストールされます。
インストールできない場合は頭にsudoをつけてインストールします。
$ sudo brew install node
これでnpmが使用できるようになります。
npmでgulpをインストール
では、gulpをインストールしていきましょう。
gulpは、グローバルとローカルの両方にインストールする必要があります。
では、まずグローバルインストールします。グローバルインストールは、ツールをマシンのどこからでも使用することができます。
-g というオプションをつけることによって、グローバルインストールすることができます。
$ npm install gulp -g
次は、作業用のディレクトリに移動して、gulpをローカルインストールします。
グローバルインストールに対し、ローカルインストールは、ツールをフォルダ内にインストールする方法です。ツールはそのフォルダ内でのみ使用できます。
まず、cd の後にディレクトリを入力、もしくはフォルダをドラッグして、作業用ディレクトリに移動しましょう。
$ cd 作業用ディレクトリ
作業用ディレクトリに移動したら、ローカルインストールする前に、「package.json」というファイルを作成します。
package.jsonを作成するには、npm initというコマンドを使います。
npm init
すると、順番に入力できるようになっていますので、入力していきましょう。（後から編集も可能ですので、それほど考える必要もありません）
入力については、npm package.json 取扱説明書をご覧ください。
では、gulpをローカルにインストールします。
$ npm install gulp --save-dev
–save-devというオプションをつけることで、先ほど作成したpackage.jsonに、以下の内容が記入されます。
"devDependencies": {
"gulp": "^3.9.1"
}
gulpfile.jsの作成
では、次にgulpfile.jsを作ります。
gulpfile.jsは、gulpの動きを制御するためのファイルです。
ファイル: gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
//ここにタスクを入力。
});
これがgulpfile.jsの基本のかたちになります。
ツールをインストールして、ここに記入していけばそのツールが使えるようになるわけです。
ソースの書き方については、徐々に解説していきます。
gulp-sass、またはgulp-ruby-sassをインストール
sassをcssにコンパイルするためのツールを追加していきます。
gulp-sass、もしくはgulp-ruby-sassをインストールしましょう。
gulp-sassをインストールする場合
では、まずgulp-sassのインストール方法です。
ターミナルに入力します。
$ npm install gulp-sass --save-dev
では、gulpfile.jsを編集していきます。
ファイル: gulpfile.js
var gulp = require('gulp');
//以下を追加
var sass = require('gulp-sass');
gulp.task('default', function() {
gulp.src('scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
まず、require()を使い、使用したいモジュールを変数に代入して使っていきます。
「gulp.task(‘default’, function() {});」は、タスクを入力する場所となります。
今回はdefaultとなっています。defaultにしておくと、ターミナルで実行する時に、「gulp」と入力するだけで実行できますが、sassなどと名前をつけておく場合が多いようです。
こちらについても、後ほど書きたいと思います。
「gulp.src(‘scss/**/*.scss’)」で、コンパイルしたいsass（.scss）ファイルのディレクトリを指定します。
ワイルドカードを使用しています。scssフォルダの中の/**/*.scss、つまりscssフォルダの中の、任意のディレクトリ階層の、拡張子がscssのファイルを全て指定していることになります。
「.pipe(sass())」は、sass（.scss）ファイルをcssにコンパイルするものです。
「.pipe(gulp.dest(‘css’))」で、書き出すフォルダの名前を指定します。今回はcssという名前のフォルダに書き出します。
gulp-ruby-sassをインストールする場合
gulp-ruby-sassを使用したい場合のインストール方法は、少しだけ手間がかかります。
まず、あらかじめ自分でsassをインストールしておく必要があります。
そのためにはgemを使います。Macには元々Rubyが入っているみたいなので、gemも使えると思うのですが、まずRubyの確認をしていきましょう。
$ ruby -v ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin15]
このようにRubyのバージョンが表示されます。
Rubyのインストール方法も確認しておきましょう。
Rubyのインストールは、Homebrewを使ってインストールすると簡単です。
$ brew install ruby
これでRubyのインストールができます。
では、gemを使ってsassをインストールしていきます。
$ gem install sass
これで、準備が整いました。
では、gulp-ruby-sassをインストールしていきたいと思います。
$ npm install gulp-ruby-sass --save-dev
では、gulpfile.jsを編集します。
ファイル: gulpfile.js
var gulp = require('gulp');
//以下を追加
var sass = require('gulp-ruby-sass');
gulp.task('default', function() {
return sass('scss/**/*.scss')
.pipe(gulp.dest('css'));
});
こちらもgulp-sassの時と同じように、require()で使用したいモジュールを変数に代入します。
「gulp.task(‘default’, function() {});」に、タスクを入力していきます。
「return sass(‘scss/**/*.scss’)」で、コンパイルしたいsass（.scss）ファイルのディレクトリを指定します。
さらに同じように、「.pipe(gulp.dest(‘css’))」で、書き出すフォルダの名前を指定します。
実際にsassをコンパイルする
では、実際にsassをコンパイルしてみましょう。
まず、sass（.scss）ファイルを作っていきます。
ファイル: scss/style.scss
.article {
h1 {
color: #222;;
}
}
ターミナルにgulpと入力します。
$ gulp
これで、cssフォルダが作られ、さらにその中にコンパイルしたcssファイルが作られます。
ファイル: css/style.css
.article h1 {
color: #222; }
タスクに名前をつける
では、gulpfile.jsのdefault部分を変更してみます。
こちらはgulp-sassをインストールした場合のgulpfile.jsファイルです。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('default', function() {
gulp.src('scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
この状態で実行するには、ターミナルにgulpと入力すれば実行できます。
これは、「gulp.task(‘default’, function() {});」の部分にdefaultと入力されているからです。
では、このdefaultを別のワードに変えてみます。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
defaultの部分にsassと入力してみました。
では、この状態で実行してみます。ターミナルに以下のコマンドを入力します。
$ gulp sass
実行するには、gulpの後に、sassというワードを入力することで、実行できるようになります。
これは、タスクをいくつも追加したとき、それぞれに名前をつけたい時などに使えます。
つまり、タスクの名前です。
この名前をdefaultにした場合は、デフォルトのタスクとして、名前を指定しなくても実行されていたわけです。
ファイルの変更を監視
gulp-sassやgulp-ruby-sassには、ファイルの変更を監視する機能があります。
早速使っていきましょう。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
//以下を追加
gulp.task('watch', ['sass'], function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
wacthという名前のタスクを追加しました。
「gulp.task(‘watch’, [‘sass’], function () {});」の部分で、名前の後に[‘sass’]という引数が使われています。
これは、タスクを実行したあとすぐに、sassという名前のタスクを実行するという意味になります。
自分は、gulp watchとターミナルに入力しただけで、すぐにcssファイルを生成または保存したいのでこの形にしましたが、sass（.scss）ファイルが保存されたときにのみsassを実行したいのであれば、下のように省くこともできます。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
//以下を追加
gulp.task('watch', function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
また、「gulp.watch(‘scss/**/*.scss’, [‘sass’]);」は、コンパイルするsass（.scss）ファイルを指定しているのですが、最後の引数としてまた[‘sass’]と記入しています。
これは、sass（.scss）ファイルが変更され、保存されたときに、sassという名前のタスクを実行するという意味になります。
では、実行してみましょう。
$ gulp watch
これで、sass（.scss）ファイルを監視している状態となり、保存するだけでcssにコンパイルされます。
watchを終了するには、「Ctrl + C」で終了します。
gulp-ruby-sassを使う場合でも方法は同じです。
エラー時にwatchでの監視が終了してしまうことの対処
sass（.scss）ファイルを監視している状態で、入力をミスしたまま保存すると、watchが終了してしまいます。
そのための対処法です。
まず、gulp-sassを使用した場合はこの様にします。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('scss/**/*.scss')
.pipe(sass()).on('error', sass.logError) //.on('error', sass.logError)を追加
.pipe(gulp.dest('css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
次に、gulp-ruby-sassを使用した場合はこの様にします。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('sass', function() {
return sass('scss/**/*.scss').on('error', sass.logError) //.on('error', sass.logError)を追加
.pipe(gulp.dest('css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
このように、.on(‘error’, sass.logError)を追加すると、エラーでもwatchでの監視を終了しなくなります。
この他に、gulp-plumberというツールを使う方法もありますが、今回は使いません。
outputStyleで、cssのスタイルを変更
ではまず、gulp-sassでcssのスタイルを変更してみたいと思います。
デフォルトの状態でcssを書き出すと、少々見にくいcssが書き出されます。
例えば、次のものをコンパイルしてみます。
ファイル: scss/style.scss
.article {
h1 {
color: #111;;
}
h2 {
color: #222;;
}
}
すると、次の様に出力されます。
ファイル: css/style.css
.article h1 {
color: #111; }
.article h2 {
color: #222; }
普段見慣れているcssとスタイルが違います。
そこで、gulpfile.jsにoutputStyleを追加していきます。
まずは、outputStyle: ‘expanded’を使ってみます。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('scss/**/*.scss')
//ここから〜
.pipe(sass({
outputStyle: 'expanded'
})).on('error', sass.logError)
//〜ここまでを変更
.pipe(gulp.dest('css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
コンパイルすると、次の様になります。
ファイル: css/style.css
.article h1 {
color: #111;
}
.article h2 {
color: #222;
}
gulp-ruby-sassを使用している場合若干異なり、「style: ‘expanded’」という様に指定します。
ファイル: gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('sass', function() {
//ここから〜
return sass('scss/**/*.scss',{
style: 'expanded'
}).on('error', sass.logError)
//〜ここまでを変更
.pipe(gulp.dest('css'));
});
gulp.task('watch', ['sass'], function () {
gulp.watch('scss/**/*.scss', ['sass']);
});
outputStyleや、styleには4つの種類があります。
outputStyle: ‘expanded’ や style: ‘expanded’ の expanded を、以下の様に書き換えることでcssのスタイルを変更できます。
分かりやすくまとめてみました。
nested
.article h1 {
color: #111; }
.article h2 {
color: #222; }
compact
.article h1 { color: #111; }
.article h2 { color: #222; }
compressed
.article h1{color:#111}.article h2{color:#222}
expanded
.article h1 {
color: #111;
}
.article h2 {
color: #222;
}
まとめ
以上、gulpによるsassコンパイルの方法と、便利な使い方でした。
その他にもgulpには様々なツールがあります。そのツールを使うと、もっと快適にsassを扱うことができます。
また、ツールの紹介も別の記事で書いていこうと思っています。
ではまた、お楽しみに。
