Share

前回に続き、gulpの使い方です。
今回は「gulp-sass」の使い方を紹介したいと思います。

前回の記事はこちら

gulp-sassとは?

CSSのメタ言語である「Sass」をgulp上で使うためのプラグインです。

Sassは、

Syntactically : 構文的に
Awesome  : すばらしい
StyleSheets :スタイルシート

の略で、簡単に言うと「すごいCSS」です。

Sassを使うことで、以下のようなメリットがあります。

・関数や変数をを使って、効率的にCSSを書くことができる
・スタイルの管理もしやすくなる

実例をあげると、

・フォントサイズを変数化して、一箇所で管理することができる
・よく使うスタイルをまとめておいて、好きな場所で簡単に呼び出せる

など、便利機能を使って効率よくコーディングを行うことができます。

POINT!
メタ言語・・・HTMLやCSSなどの言語を作成する言語です。

早速インストールしていきます。

gulp-sassをインストール

gulp-sassを使いたいフォルダへインストールを行います。

npm install -D gulp-sass

同時にgulpもインストールする場合、

npm install -D gulp gulp-sass

とすると、同時に2つがインストールされます。

タスクの作成

実際にSassを動かすために、タスクを作成します。
該当するフォルダに「gulpfile.js」を作成し、以下のコードを記述します。

今回は、scssフォルダにある、style.scssファイルを読み込んで、cssフォルダにstyle.cssファイルを出力してみます。

 const gulp = require('gulp');  // gulpプラグインの読み込み
 const sass = require('gulp-sass');  // gulp-sassのプラグインを読み込み

 gulp.task('default', function () {  // style.scssをタスクを作成する
   gulp.src('scss/style.scss')  // style.scssファイルを取得
     .pipe(sass())   // Sassのコンパイルを実行
     .pipe(gulp.dest('css'));  // cssフォルダー内に保存
 });

var gulp = require(“プラグイン名”)
使用するgulpのプラグインを読み込みます。

gulp.task(“タスク名”, 実行される処理)
タスク名と、実際に行われる処理を記述します。タスク名をdefaultにすると、タスク実行時のタスク名を省略できます。

gulp.src(“取得するファイル”)
タスクの対象となるファイルを取得します。複数のファイルも指定できます。

pipe()
これで処理をつなげることができます。pipe()メソッドはいくらでもつなげることができるので、連続した複数の処理を実装することが可能です。

gulp.dest(“保存先フォルダ”)
処理を行ったファイルを指定の場所に保存します。

タスクを実行してみる

コマンドラインに以下を入力します。

npm gulp

これでタスクが実行され、SCSSファイルがコンパイルされて、CSSフォルダCSSファイルが書き出されます。

※タスク名を「default」に設定すると「gulp」のみで実行できます。
 それ以外だと、「gulp 〇〇〇〇」でタスクが実行できます。

サンプル

コンパイル前のSCSSファイル(scss/style.scss)

div {
   color: #
   .text {
    font-size: 14px;
   }
 }

// 変数
$Color: #000;

h1 {
   color: $Color;
 }

コンパイル後のCSSファイル(css/style.css)

div .text {
   font-size: 14px; 
}
h1 {
   color: #000; 
}

まとめ

gulp-sassを使いこなせば、効率よくコーディングを行うことが可能です。
使っていない方は、ぜひ使ってみてください。

gulpは他にも便利なプラグインが数多くあります。
今後も他プラグインを紹介したいと思います。

株式会社 ヤップ エンジニア

升田 圭亮

ヤップのコーディング、プログラミング担当。日々学んだことを発信。

記事中の画像データを使いたい!や、この記事もっと詳しく書いて欲しいなどのご要望、ご意見は上記お問合せをクリック、もしくはお電話ください。

06-6445-7317