ど〜も〜、文明開化の足音を発するエンジニア 中尾こと、 Hawk(と呼ばれたい) です。
いや〜、暑くなって来ましたね!
そして、今日は七夕ですね!
「夏、enjoyしてますか?」  

ちなみに私は 例年通り です。
  
では、本題に参りましょう!
今回も引き続き、gulpを一からイジって見た企画 第参話 〜sass、襲来〜 になります!

過去の内容が気になる奇特な方はこちらからどうぞ!
> 第壱話を見てみる
> 第弐話を見てみる

それでは、はりきっていきましょ〜!

そもそもsassてなんやねん!

CSSを便利に書くことができる所謂メタ文言 と呼ばれるものです。
Syntactically Awesome StyleSheet の略で、「構文的に素晴らしいスタイルシート(google翻訳)」 という意味らしいです。
詳し使い方は~気が向いた時に~後ほど記事起こそうと思っていますが、「CSSを便利にかっこよく書けるイカしたヤツ」 程度の認識で大丈夫です!
ちなみにsassと言いつつ、使用するファイルの拡張子は .scss を使用することが多いです。
拡張子 .sass も存在するのですが、scssに比べて規約が緩く、難解になりやすいため、 .scss の方が好まれます。
今回も例に漏れず .scss を使用します!

sassのインストール!

早速ですが、 sassを来襲させましょー
gulp_template と内に移動し、下記のコマンドを実行します。
もちろんmac使いは sudo 付きです。

npm install gulp-sass --save-dev

すると例に漏れず、package.jsondevDependenciesが下記のように変化しているかと思います。

  "devDependencies": {
    "browser-sync": "^2.18.12",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  }

これで、sassは無事来襲できました(笑)
これだけでは意味がないので、実際に使ってみましょう!

sass(.scss)の準備!

ここではせっかく来襲していただいたので、sassを使ってみたいと思います。
まずは 赤ちゃんような純粋な心 で、下記のようにファイルを準備しましょう。
gulp_template
 └ src … 開発用ソース保存先
   └ scss … sassファイルの保存先
     └ index.scss … 今回使用するsassファイル

そして、sassファイルを下記のように編集してみましょう!

.index_main {
  h1 {
    color: #c00;
  }
}

かなりシンプルですね!
前回用意した index.html もちょっとイジります。
下記のように書き換えてみましょう!

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>gulpの見本だよ!</title>
  <link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
<body>
  <main class="index_main">
    <h1>これはgulpの見本だよ!</h1>
  </main>
</body>
</html>

変更点はCSSの呼び出しの追記とbody内のHTML構造の変更です。
ただ、まだスタイルが当たりません!
なぜなら、まだCSSが存在していないからです。
そこで実際にsassコンパイルしてCSS化してみましょう!

sassのコンパイル設定をしよう!

ここではお得意様の gulpfile.js をイジっていきます。
まずは、頭の変数宣言部分です。
下記を追記しましょう!

var sass = require("gulp-sass");
var src = {
    'sass': './src/sass/**/*scss'
};
var dest = {
  'css': './product/css'
};

ちょろっと補足します!

変数名 補足
sass 来襲させた"gulp-sass"を宣言します。
src src内のパスをjson形式で保存しておきます。
dest 出力先のパスをjson形式で保存しております。

続いて後半部分です。
コードの最後付近で構わないので、下記を追記しましょう。

// sass
gulp.task("sass", function() {
    gulp.src(src.sass)//読み出したいパスを指定
        .pipe(sass({outputStyle : 'expanded'}))//sassのコンパイル形式を指定
        .pipe(gulp.dest(dest.css))//sassのコンパイル先を指定
        .pipe(browser.reload({stream:true}));//更新されたらブラウザを更新
});

// 監視用
gulp.task("default",['server'], function() {
    gulp.watch(src.sass,["sass"]);//sassが更新されたらsass関数を実行
});

これで諸々の準備完了です!

sassをイジってみよう!

準備が整いましたので、心を落ち着けていつものコマンドを実行してみましょう!

gulp

前回と同様ローカルサーバーが立ち上がると思います。
そして、おもむろにsassファイルを更新してみましょう。
すると、何ということでしょう!先ほどまでの地味な文字色が見事な朱色に変化しているではありませんか!
このような感じで、sassファイルを変更するたびに自動でフラウザがオートリロードします!
「どうだい、便利だろう。慣れちまったらもう戻れねぇぜ、ぐへへへへ。」

もっと便利にしてみよう!

これでも便利なのですが、さらにオススメの設定がありますので、追加して行きたいと思います。
まずはこれ、gulp-autoprefixer こいつは自動でベンダープレフィックスを付与してくれます。
設定は後で行いますので、まずはインストールしましょう。

npm install gulp-autoprefixer --save-dev

続いては、 gulp-plumber です。
こちらは、通常sassなどファイルの構文エラーが起きるとgulpの監視が止まってしまうのですが、こちらを入れることで、構文エラーが起きても監視を続行させることができます。
注意として、監視は続行しますが、構文エラーが解消されるまでコンパイルは実行されないのであしからず!!

npm install gulp-plumber --save-dev

インストールが完了したら gulpfile.js をイジります。
最終的には下記のようになるかと思います。

var gulp = require("gulp");
var browser = require("browser-sync");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var plumber = require('gulp-plumber');
var src = {
    'sass': './src/sass/**/*scss'
};
var dest = {
  'css': './product/css'
};

// サーバー起動
gulp.task("server", function() {
    browser({
        server: {
            baseDir: "./product/"
        }
    });
});
// sass設定
gulp.task("sass", function() {
    gulp.src(src.sass)
        .pipe(plumber())
        .pipe(sass({outputStyle : 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest(dest.css))
        .pipe(browser.reload({stream:true}));
});

// 監視用
gulp.task("default",['server'], function() {
    gulp.watch(src.sass,["sass"]);
});

これで、自由にsassのコンパイルができるようになりましたね!
かなりスピーディーに反映されるので、ノンストレス ですね!

次回予告

何とかsassの脅威を乗り切ったHawk(と呼ばれたい)
歓迎する仲間たち。
しかし、その裏で着々と進行するgulpプロジェクト。
Hawk(と呼ばれたい)に襲いかかる次の試練とは?
次回、「見知らぬ、pug」
お楽しみに!

Shere
  • はてなブログ
  • Twitter
  • Facebook
今更ながら一からgulpなるものをイジって見た 第参話 〜sass、襲来〜

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。