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

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

スポンサードリンク

おすすめの記事♪

【Vim使い方】ソースを色付けしてコードを読みやすくする方法!!

[email protected]_is_Rです。 Vimの使い方、第8回目です。 今回はVimを使う上で、コードを見やすくするために、ソースを色分けする方法を紹介していきます。 前回の記事

software

WEB開発で使えるフリーのテキストエディタ、厳選ベスト3!

[email protected]_is_Rです。RはRevolutionのRです。 WEBページを作る上で必須になるのがテキストエディタ。 これがあると、HTMLを書くときにミスが大幅に減ります。

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

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

software

【Mac可】CrossFTPを使ってサーバーとデータを送受信する方法!!

[email protected][email protected]。だって痛いじゃん。 いままでサーバーとのファイルのやり取りにはDWを使っていたのですが、少し使い勝手

日本通信のポケモンGO専用SIM「b-mobile ゲームSIM」もうすぐ発売!!

[email protected]_is_Rです。 ポケモンGOが凄く流行ってますね。ニュースを見ていると、ポケモンGOの記事の割合がすごいです。 FREETELの「Pokémon GOパケ

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

[email protected]_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

WordPress

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

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

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一[email protected]_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

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

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

RezerGo

【RazerGo使い方】ポケモンGO専用チャットが神がかっててヤバイ!!

[email protected]_is_Rです。 ポケモンの場所をリアルタイムで特定できる地図アプリが多く出回りましたが、サービスが止まっているものが続出していますね。 今まで使えたアプリが使用でき


コメントを残す

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


Category

Games