ブログでなにやるかーと唸ってましたが，「備忘録を貯めておけばいいじゃん」と思ったので．

n番煎じでも気にしないメンタルを持とう...

今回は，Sassのコンパイルをgulpで自動化しようーって話です．

Sassとは？
gulpとは？
事前準備
実際に動かしてみる
- コンパイル
- コンパイルの自動化
終わりに

Sassとは？

Sass（サース）とは，CSSを変数や関数を用いて書くことができるCSSの拡張言語です．

Sass（サース、英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウムが開発したスタイルシート言語である。

wikioedia

CSS セレクターをネスト（入れ子）したり，複数のSassファイルから1つのCSSファイルを作成したりと様々なことができます．

公式サイトがすごくおしゃれ...

gulpとは？

gulp（ガルプ）とは，タスクを自動化できるタスクランナーです．

ファイルの変更を監視して，変更があったら何らかの処理を自動で実行するみたいなことができます．

公式サイトがすごく赤い．

同系統のもので，Grunt（グラント）があります．gulpより前にあったタスクランナーで，gulpより記述が難しいらしい．使ったことがないので何とも言えない...．

タスクランナーとは？

タスクランナーとは，タスク（処理，課題etc...）を自動化してくれるツールのことです．
タスクの具体例は，Sassのコンパイルだったり，画像圧縮，CSSのminifyなど．

事前準備

gulpを使う前に使うツールのインストールや作業環境を作ります．

Node.jsのインストール

まずNode.jsのインストールを行います． Node.jsの公式サイトからインストールします．

Macの場合はHomeberwを使って環境を作ることも可能です． Homebrewを用いた方法は以下の記事がすごく丁寧でわかりやすかったです．

qiita.com

作業用ディレクトリを作成

適当な場所にディレクトリとSassファイルを作ります．

ツリーは以下のようにしておきます．
今回はhatena-gulpディレクトリ以下で作業します．

hatena-gulp/
├── css
└── sass
    └── sample.scss

ちなみに，sample.scssはこんな感じ．めっちゃてきとうに．

$blue: #00f;
$red: #f00;
.thing{
    color: $blue;
    .red{
        background-color: $red;
    }
}

最後にhatena-gulpディレクトリに移動しておきます．

使用するモジュールのインストール

npmの初期化

初期化します．package.jsonが作成されます．

$ npm init -y

-yオプションをつけると，package.jsonが自動で作成されます．

オプション無しだと，パッケージの名前や説明などを対話形式で設定できます．

初期状態のpackage.jsonはこんな感じ．

{
  "name": "hatena-gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

モジュールのインストール

使用するモジュールをインストールします．
今回はgulpとgulp-sassというモジュールを使います．

// gulp グローバルインストール
$ npm install gulp -g

// gulp ローカルインストール
$ npm install gulp --save-dev

// gulp-sass ローカルインストール
$ npm install gulp-sass --save-dev

グローバルと開発用（ローカルインストール）の違いとは

グローバルインストールを行うと，コマンドを実行する際実行ファイルまでのpathを省略することができます．また，どこのディレクトリでもコマンドの実行が可能になります．今回はgulpコマンドを使用するため，グローバルインストールを行いました．

ローカルインストールを行うと，package.jsonと同じ階層にnode_modulesというディレクトリが作成されます．この中にインストールしたモジュールが入ります．ローカルインストールした場合，pathが通っていないためコマンドの実行ができません．

最後にpackage.jsonのscriptsに追記します．こんな感じになります．

{
  "name": "hatena-gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2"
  }
}

この状態でのツリーはこんな感じ．

hatena-gulp
├── css/
├── sass/
│    └── sample.scss
├── node_modules/
│    └── 色々...
├── package.json
└── package-lock.json

実際に動かしてみる

いよいよgulpの登場です．
まずコンパイルから，そのあとに自動化をやっていきます．

コンパイル

gulpでは，タスクをgulpfile.jsに記述していきます．

では，早速gulpfile.jsにタスクを書いていきます．package.jsonと同じ階層にgulpfile.jsを作成して，以下のように書きます．

// モジュールの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");

// タスクを作成
// gulp.task("タスク名", 実行される処理)
gulp.task("sass", function(){
    return (
        gulp.src("sass/**/*.scss") // 取得するファイル
        .pipe(sass({outputStyle:"expanded"})) // コンパイル時のオプション
        .pipe(gulp.dest("./css")) // 保存先
    );
});

それから，作業用ディレクトリ（hatena-gulpディレクトリ）に移動して，以下のコマンドを実行します．

$ gulp sass

実行後，cssディレクトリ以下にsample.cssというCSSファイルができていると思います．

これで，コンパイルするというタスクの作成ができました．

コンパイルの自動化

今の状態だと，コンパイルが必要になるたびに自分でコマンドを叩かなくてはいけません．

そこを，ファイルを監視して，変更があったら自動でコンパイルしてくれるようにします．

gulpfile.jsにタスクを書いていきます．以下を追記します．

// タスクを作成
// gulp.watch(”監視するファイル”, 実行される処理)
gulp.task("sass-watch", function(){
    return gulp.watch("sass/**/*.scss", function(){
        return (
            gulp.src("sass/**/*.scss")
            .pipe(sass({outputStyle: "expanded"}).on("error", sass.logError))
            .pipe(gulp.dest("./css"))
        );
    });
});

追記後，以下コマンドを実行することで，ファイルの監視をしてくれます．

$ gulp sass-watch

sample.scssファイルを適当に書き換えて保存すると，自動でコンパイルが実行され，CSSファイルが更新ていると思います．

終わりに

私が個人でwebアプリケーションを作っている時に，CSSを生で書いていました...．色の変更や数値の変更の際，「変数とか無いのかよー」と思いながら書いていたので...もっと早く知るべきだったなあーと思います．

少しでも「コンパイルとか面倒くさそうだしなあー」と思っている方の助けになればと思います．

ここまで読んでいただき，ありがとうございます！

あくびのあくびしないブログ

エンジニアを目指す学生のブログ兼備忘録

gulp を使って Sass を気持ちよく書く