gulpでsassをcssにコンパイル。インストール&便利な使い方。

公開 :  → 更新 :

幸せそうな人を見ると、転べって思います。@It_is_Rです。

Webページを制作するとき、sassをcssに変換して使用することが多いと思います。
今回は、gulpを使ってsassをcssにコンパイルする方法や、使う上で便利な方法を紹介していきたいと思います。

しかも、WEB開発初心者の方でもわかりやすく、インストールから詳しく書いていこうと思います。

gulpとは

gulpは、sassからcssのコンパイルを含め、様々なことを自動で行ってくれる、タスクランナーと呼ばれるものです。
ただ、導入には少し手順を踏まなくてはなりません。今回はその手順も含め、解説していきます。
gulp

まず、gulpインストールするには、npmというパッケージ管理ツールを使います。
npmは、Node.jsをインストールすることで同時にインストールされます。また、Node.jsのインストールにはHomebrewを使うこともできます。

Homebrewを使わなくてもNode.jsをインストールすることはできるのですが、HomebrewにはWeb開発での便利なツールが色々あるので、インストールしておくと後々役立つかもしれません。
また、後々記述するRubyのインストールなどにも、Homebrewを使用することもできます。

Homebrewのインストール

まず、Homebrewをインストールしてみましょう。
Homebrew
Homebrew

Homebrewのインストールには、上のリンクから画像の四角で囲まれた部分をターミナルに入力します。
Homebrew

詳しくは、「Homebrewを使いこなせ!Macへのインストールや使い方。」という記事をご覧ください。

Node.jsをインストール

Node.jsをインストールします。

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 の後にディレクトリを入力、もしくはフォルダをドラッグして、作業用ディレクトリに移動しましょう。

screen

$ 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を扱うことができます。

また、ツールの紹介も別の記事で書いていこうと思っています。
ではまた、お楽しみに。

スポンサードリンク

おすすめの記事♪

Smartphone

AndroidやiPhoneで最新のニュースを確認。おすすめニュースアプリ。

皆様は最新のニュースをどのようにチェックしているのでしょうか。Googleニュース、Yahooニュースなどが王道だと思います。 様々なニュースサイトがありますが、やっぱりパソコンでニュースをチェック

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかし[email protected]_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

【ポケモンGO】効率よくポケモンゲット。絶対必要なサイト&アプリ!!

[email protected]_is_Rです。 田舎はアイテムやポケモンが少ないという不公平さからのストレスを、ポケモンにモンスターボールを投げつけて解消しましょう!! 今回はポケモン

【初心者歓迎】クライアントサイドとサーバーサイドの違いを解説!!

[email protected]_is_Rです。 今回のテーマは、ちょっと細かいテーマですが、難しいこと考えずに気楽にいきましょう! 今回はクライアントサイドプログラムと、サーバーサイドプログ

【Vim使い方】ファイルの作成と開き方、保存の方法。(Mac OS X)

[email protected]_is_Rです。 前回に引き続き、Vimの使い方について解説していきたいと思います。 今回は、ファイルの作成、開き方、保存の方法について解説していきたいと思い

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと[email protected]_is_Rです。やかましいわ。 今回の記事は初のWordPre

クローバPAGE

【クローバPAGE】知識ゼロでも超簡単にサイトを作れるサービス!!

[email protected]_is_Rです。 しかし、HTMLとか、CSSとかなにそれ?……という感じのひともいるでしょう。 そこで、今回は知識が全くなくても超簡単にWebサイトが作れ

newsdigest

NewsDigest Android版リリース。災害に備える速さを追求したニュースアプリ。

[email protected]_is_Rです。 株式会社JX通信社は、2015年1月に提供を開始した「NewsDigest」iPhone版の20万ダウンロードを受け、昨日12月10日「N

【Vim使い方】Vimの画面を分割して使う方法。画像付きで分かり易く!

ブログの正式タイトルが、英語表記からカタカナ表記に変更になりました。 それに合わせてロゴも作っていこうと思っていま[email protected]_is_Rです。 皆さんブログのタイトルに興味はないと思うので、本題

【無料 & 商用可】マジで使える海外の写真素材サイト11選まとめ!!

写真はカメラと場所が必要なので、腕だけではど[email protected]_is_Rです。 写真素材サイトは、日本のものでもいくつかあります。 しかし今回は、日本の画像素材はそろそろ飽きたという


コメントを残す

メールアドレスが公開されることはありません。


Category

Games