Category
ウェブ制作

カルアカブログ

コピペで始めるgulp入門(2):Sass(SCSS)導入編・前編

こんにちは、フロントエンドエンジニアのかみーゆです。

みなさん、コーディングみなさん効率的にできてますか?
今の時代、大切なのは効率です^^

便利なツールは使わなきゃソンソン!今回はコーディングを爆速効率化するSass(SCSS)(サスと読む)の導入方法をノンプログラマでもできるだけコピペで導入する方法を説明します。
ベタで長年cssを書いている人は、一度使うとその便利さに目からウロコが落ちることと思います。
今回はSass(SCSS)をgulpで扱うための環境構築の説明です。ノンプログラマにも理解しやすいよう、かなり詳しく書いてます。そのくらい分かるよ、という方はすっ飛ばしながら読んでください。
それでは早速チャレンジしてみましょう。

MACでの操作を想定してしています。ご了承ください。

目次
  1. Sass(SCSS)ってなんぞ
  2. モジュールのバージョンの確認とアップデート
  3. SCSSをgulpでコンパイルできる環境を作る
  4. ライブストリームしながらコンパイルする
  5. さらに便利にコンパイル
    1. コンパイルエラーでgulpが落ちないようにする
    2. エラーを通知
    3. デバッグしやすいようsourcemapを追加
    4. ベンダープレフィックスを付与させる
  6. まとめたソースコード
↓さらにSass(SCSS)の具体的な使い方を知りたい方はコチラ↓
コピペで始めるgulp入門(3):Sass(SCSS)導入編・後編

Sass(SCSS)ってなんぞ?

Sass(SCSS)はCSSのメタ言語です。変数や繰り返し処理(ループ)を使えるので、プログラミングに近い形で書けますが、普通にCSSで書いてもいいので敷居は高くありません。

Sass(SCSS)はSyntactically Awesome Stylesheetsの略。Awesomeは英語で「イケてる」という意味なので「構文的にイケてるスタイルシート」という意味なります。
もともとSass記法で書かれていたのですが、よりCSSに近い記法はSCSSです。私はSassは書いたことはありませんが、おそらくCSSに慣れ親しんでいる方は、SCSSの方がスムーズに導入できると思います。
プロセッサと呼ばれるものを使ってCSSを生成します。プロセッサはいろんな種類がありますが、今回はgulpを使います。

Sass(SCSS)の利点

1.チーム開発にぴったり

ファイルをパーツ(header,sidebarなど)やページ単位で細分化してスタイルを管理できます。
どんなに細分化しても最終的に一つのCSSへまとめることができます。
誰が、どのパーツをコーディングするかを分けたりできるので、コンフリクト(バッティング)しにくく、チームでのコーディングに向いています。

2.使い回せる

Sass(SCSS)にはmixinというスタイルのセットを作っておくことができます。変数を使ったり繰り返し処理(ループ)もできるので、コーディング量が圧倒的に減ります。

3.CSSの設計崩壊を防げる

デザインカンプがバラバラ上がってきて、突然他と違ったスタイルを適用しないといけなくなることってありませんか?
どうしてもimportant(強制的に適応)を使わないといけなくなり、あとで見ると他のパーツがおかしくなって、またimportantなんてこともあると思います。
こんなあるあるを防ぐのはCSSを何枚か分けるのが手っ取り早いですが、ブラウザでの表示スピード低下を招くのでオススメしません。
最初からファイルやパーツ単位に分けてスタイルをコーディングして管理しておけばこんな設計崩壊が防げますし、崩壊してもリカバリーも早いです。

モジュールのバージョンの確認とアップデート

!コマンド入力するときのお願い!
コードの前に$マーク+スペースがありますが$マーク+スペースは省いてコピペしてください。

node.jsとnpmとがインストールされているのが最低条件です。やり方がわからない方は、「コピペで始めるgulp入門(1):ライブリロード編」のnode.jsとnpmのインストール方法をご確認ください。

まずはnode.jsとnpmがインストールされているか確認します。バージョンで確認できます。

コマンド
$ npm -v
$ node -v

node.jsのバージョンが古い場合は、npmのモジュール n を使ってアップデートしましょう。まずはグローバルにインストールし、n --latestで最新のバージョンを確認します。

コマンド
$ npm install -g n
$ n --latest

n latestで最新にアップデートしましょう。

コマンド
$ n latest

以下のコマンドでnpmのアップデートします。

コマンド
$ npm update -g npm

古いモジュールだと正しく動作しない場合があります。なので古いモジュールがないか確認します。

コマンド
$ npm outdated

余談ですが、私の昔使っていた古い環境はこんなことになってました ^ ^;

Currentは現在インストールされているバージョン、Wantedは最低必要なバージョン、Latestは最新バージョン、Locationはインストールされている場所です。

グローバルのモジュールをアップデートします。

コマンド
$ npm update -g

npmのバージョンが2.6.0以下の場合は次のコマンドだそう。

コマンド
npm update jshint -g

※最悪どうしてもできない方は、全てuninstallしてしまいましょう。やり方は後日まとめます。

Sass(SCSS)をgulpでコンパイルできる環境を作る

は、環境を作りましょう。
まずは、テスト用にscss-lesson/ディレクトリを作りましょう(ディレクトリ名は任意で場所はディスクトップ以外)。このディレクトリでコマンドを叩かなければいけないので、以下のコマンドで移動しておきます。

cdの後にスペースを一個空けてfinderのフォルダアイコンをターミナルにドラッグ&ドロップするだけ移動できます。

コマンド
$ cd ディレクトリのあるパス

package.jsonファイルを作成します。このファイルはどんなモジュールを使うかなどのレシピみたいなものです。npmとnode.jsさえインストールしておけば同じ開発環境を作れます。

設定は対話形式で、最低nameとversionの入力が必要ですが今回は練習なので、全てエンターで進んでokをクリックでOKです。

コマンド
$ npm init

こんな感じでファイルが生成されます。

gulpをインストールします。もし、グローバルにインストールしてない場合は以下のコマンドでグローバルにインストールします。

コマンド
$ npm install -g gulp

ローカルにもインストールします。

コマンド
$ npm install gulp --save-dev

※ --save-devは開発用に使うモジュールだよという意味です。

gulp-sassもインストール。

コマンド
$ npm install gulp-sass --save-dev

テスト用ディレクトリ内にこんな感じでディレクトリ・ファイルを作っておきましょう。
dev/は開発用(作業用)、dest/にはリリース用(実際公開する)のデータが入るイメージです。

scss-lesson/
  ├ dev/
  │ └ assets/
  │   └ scss/
  │       main.scss
  ├ dest/
  │ └ assets/
  │ index.html
  └ node_modules/ インストールしたモジュールが格納される。勝手に生成される
package.json
gulpfile.js

gulpfile.jsを作成し、以下のコードを書きます。

JS
//モジュール
const gulp = require('gulp')
const sass = require('gulp-sass')

//開発ディレクトリ const devDir = 'dev/' const dev = {   'scss': devDir + 'assets/scss/**.scss' }

//リリース用ディレクトリ const destDir = 'dest/' const dest = {   'css': destDir + 'assets/css' }

//scss gulp.task('sass', () => {   gulp.src(dev.scss)   .pipe(sass())   .pipe(gulp.dest(dest.css)) })

gulp.src()でコンパイルしたいファイルを指定します。この場合、assets/scss/内の.scssの拡張子のファイルが全て対象ということになります。.pipe()でつないでタスクを指示します。

まずはsassコンパイルしてみましょう。以下のコマンドを叩きます。

コマンド
$ gulp sass

dest/assets/css内にmain.cssが生成されていたら成功です。

圧縮方法、インデントを指定する

gulp-sassではインデント方法や圧縮方法を指定できます。

JS
//scss
gulp.task('sass', () => {
  gulp.src(dev.scss)
  .pipe(sass({
      outputStyle: 'expanded',
      indentType: 'tab',
      indentWidth: 4,
    })
  )
  .pipe(gulp.dest(dest.css))
})

outputStyle: 値で圧縮方法を指定できます。圧縮方式は4種類あります。

expanded

全て展開します。可読性は抜群ですが、ファイルは当然重くなります。

CSS
body {
color: #333;
  background: #eee;
}

p{
  font-size:16px
}

compact

一行ずつコンパクトにまとめます。

CSS
body { color: #333; background: #eee; }
p{ font-size: 16px; }

nested

ネスト方式です。何も指定しなければ、これがデフォルトです。

CSS
body {
color: #333;
background: #eee; }
p{
font-size: 16px; }

compressed

ぎゅぎゅっと圧縮。コメントなども無くなります。リリース時はオススメ。

CSS
body{color:#333;background:#eee}p{font-size:16px}

インデントの指定

indentWidth:値でお好みのインデントの数を指定します。
インデントのデフォルトはソフトタブ(スペース)です。なので、tabを使いたいときはindentTypeの値を'tab'にします。

ブラウザシンクさせながらコンパイルする

ではファイルが変更・保存されるたびにSass(SCSS)をブラウザシンクしながらコンパイルさせていきましょう。

browser-syncをインストール

BrowserSync(ブラウザシンク)に必要なモジュールをインストールします。

コマンド
npm install browser-sync --save-dev
JS
//モジュール
const browserSync = require('browser-sync')

//browser sync gulp.task('browser-sync', () => {   browserSync({     server: {       baseDir: destDir,       index : 'index.html'     }   }) })

デフォルトでBrowserSyncさせます。

JS
gulp.task('default', ['sass','browser-sync'], () => {
  gulp.watch( dev.scss, ['sass'])
  gulp.watch(dev.scss).on('change', browserSync.reload)
})

今回は3行目にライブリロード処理をしています。

Macではcomand + cでブラウザシンクを切ることができます。

さらに便利にコンパイル

さあ、Sass(SCSS)が使える環境が整いました。さらに便利にコンパイルするためにいくつかモジュールを入れてみましょう。

コンパイルエラーでgulpが落ちないようにする

Sass(SCSS)で記述ミスなどあるとコンパイル時にコケて、都度gulpが落ちます。せっかく自動化しているのに毎回、起動しなければいけないとなると面倒です。
これを防ぐためにplumberというモジュールをインストールします。

コマンド
$ npm install gulp-plumber --save-dev

Sass(SCSS)をコンパイルする前に差込みます。

JS
//モジュール
const plumber = require('gulp-plumber')
//scss
gulp.task('sass', () => {
  gulp.src(dev.scss)
  .pipe(plumber())
  .pipe(sass())
  .pipe(gulp.dest(dest.css))
})

わざとコンパイルエラーが出るようにSass(SCSS)を書いてみました。ターミナルにこんな感じでエラーは出ますが、gulpは止まりません。

エラーを通知

エラーでgulpが止まらなくなるとなるで、エラーに気付きにくくなります。なので、エラー内容を教えてくれるgukp-notifyというモジュールをインストールします。

コマンド
$ npm install gulp-notify --save-dev

plumberのエラーハンドラーに以下のように追記します。

JS
//モジュール
const notify = require('gulp-notify')
//scss
gulp.task('sass', () => {
  gulp.src(dev.scss)
  .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
  .pipe(sass())
  .pipe(gulp.dest(dest.css))
})

エラーがあると通知されます。ターミナルはこんな感じで表示されます。

エラー内容:7行目に$testなんて変数ないよ。

デバッグしやすいようsourcemapを追加

モジュールのgulp-sourcemapsをインストールします。

sourcemapを使うと、どのSass(SCSS)ファイルにスタイルを書いたか教えてくれるので、コードのデバッグがしやすくなります。

コマンド
$ npm install gulp-sourcemaps --save-dev

scssのタスクに以下を追加します。

JS
//モジュール
const sourcemaps = require('gulp-sourcemaps')
//scss
gulp.task('sass', () => {
  gulp.src(dev.scss)
  .pipe(sourcemaps.init()) //map生成
  .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
  .pipe(sass())
  .pipe(sourcemaps.write('../map')) //cssの格納される一個上の階層にmapのファイル追加
  .pipe(gulp.dest(dest.css))
})

cssの一番下にこのようなコードが追加されています。

CSS
/*# sourceMappingURL=../map/main.css.map */

Chromeのdeveloper toolで確認すると、通常main.cssファイルを参照しますが、このようにmain.scssを参照してくれます。bodyのスタイルがmain.scssの2行目に書かれていることが分かります。

ベンダープレフィックスを付与させる

ベンダープレフィックスを自動で付与させるモジュールをインストールします。

コマンド
$ npm install gulp-autoprefixer --save-dev
JS
//モジュール
const autoprefixer = require("gulp-autoprefixer")
//scss
gulp.task('sass', () => {
  gulp.src(dev.scss)
  .pipe(sourcemaps.init()) //map生成
  .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
  .pipe(sass())
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],//最新より2個前
    cascade: false
  }))
  .pipe(sourcemaps.write('../map')) //cssの格納される一個上の階層にmapのファイル追加
  .pipe(gulp.dest(dest.css))
})
SCSS
.flex {
  display: flex;
}

コンパイル結果はこちらになります。

CSS
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

まとめたソースコード

全ての機能を詰め込んだソースコードはこちらです。

うまくSass(SCSS)をコンパイルできましたか?
次回は、本格的にSass(SCSS)の書き方などを説明します。

おまけ

モジュールをインストールするたびにいちいちエラーが鬱陶しいと思う方は、package.jsonに "private": trueを追記しておきます。

json
{
  "name": "sass-lesson",
  "private": true,
  // ~ 以下省略 ~
}
Tags
gulp
node.js
Sass(SCSS)

関連記事

関連サービス