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の使い方について、記事を書いていこうと思います。 さて、前回も少しだけ出てきましたが、Vimのモードっていったい何なんでしょ

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 [email protected]_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

WordPress

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

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

あなたの前世は猫でしょう!

LINEスタンプを販売しよう。販売の手順や方法。

前は、猫より犬派だったけど、猫を飼いはじめて[email protected]_is_Rです。 今回は、LINEスタンプの販売方法について、記事を書いてみたいと思います。 LINEスタンプは、誰

【Poke LIVE】リアルタイムでポケモンの位置が分かる究極のアプリ!!

ポケモンGOのアイデアはすごいなーと感心するば[email protected]_is_Rです。(←何様!? さて、今回はポケモンGOをプレイする上で、リアリタイムでポケモンの位置が分かってしまう究極のアプリを紹介します

software

StartNinjaで超簡単にMacの起動音を消す方法。

ダメと言われるとやりたくなる。良いよって言わ[email protected]_is_Rです。 Macを起動する時、「ジャーン!!」という音がなりますよね。なんかこの音、ちょっと良いけど、たかが知れてる

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

[email protected]_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうで[email protected]_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこ[email protected]_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

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

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


コメントをどうぞ!

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




Games