【Gulp】Gulpを使ってSassをコンパイルする方法【初心者向け】

本記事ではWeb制作の現場ではよく使われているGulpについて初心者向けに「Sassのコンパイルする方法」について解説していきます。

もしSassのコンパイル以外にも効率的にコーディングするための便利なパッケージについて学びたい方はこちら

【Gulp】Gulpを使った開発環境の構築方法まとめ【Web制作】

基本的なことからていねいに解説していますので初心者の方は手を動かしながら理解してください。

それではさっそく始めていきましょう！

Gulpとは

まずはじめに、「そもそもGulpとは？」について解説していきます。

Gulpとはタスクランナーという決められたタスク処理をパッケージを使ってそのタスクの自動化するためのツールです。

開発の最初にGulpでタスク処理を構築しておけば効率的に作業を進めることができます。

Node.jsをインストール

Gulpを使用するためにはNode.jsをインストールする必要があります。

すでに他のプロジェクトでNode.jsをインストールしている場合は読みとばして大丈夫です。

まだNode.jsをパソコンにインストールしていない方は公式サイトからダウンロードしましょう。

ダウンロードページには「推奨版」と「最新版」がありますが、特に理由がなければ「最新版」をダウンロードすればOKです。

コマンドラインを起動

Node.jsがインストールされたかこちらのコマンドで確認しましょう。

正しくインストールされていればNode.jsのバージョンがコマンドラインに表示されます。

$ node -v

-vはバージョンを意味しています。

package.jsonを作成

こちらのコマンドを実行するとpackage.jsonファイルが作成されます。

$ npm init -y

package.jsonファイルにnpmで追加したパッケージの情報が追加されていきます。

Gulpをインストール

Gulpを使用するために、ローカル環境にGulpをインストールします。

$ npm install gulp -D

installは「i」と省略することも可能です。※以降のコマンドでは「i」で記述します。

「-D」は「–save-dev」と記述してもOKです。このコマンドを入れることでプロジェクトにのみgulpをインストールできます。

最近はグローバル（PC全体）にgulpを入れるのは減少していますが、「-g」とすることでも可能です。

$ npm install gulp -g 

gulpfile.jsを作成

GulpでSassをコンパイルするようなタスクを記述していくためにはgulpfile.jsが必要になりますので作成しましょう。

プロジェクト内で直接gulpfile.jsを作成してもいいですし、コマンドラインから作成することも可能です。

$ touch gulpfile.js

Sassのコンパイル

まずはSassをコンパイルするためのタスクをGulpにインストールする必要があります。

$ npm i gulp-sass -D 

インストールできたらpackage.jsonのdevDependenciesに下記のコードが追加されているので確認しましょう。

▼package.json

"devDependencies": {
 "gulp-sass":"^4.1.0"
}

package.jsonに記述されたパッケージは以降、npm installコマンドを実行することでパッケージを追加することができるので他プロジェクトメンバーにとっては手間なく同じバージョンのパッケージをインストールすることができます。

// gulpの読み込み
const gulp = require("gulp");
// sassをコンパイルするプラグインを読み込み
const sass = require("gulp-sass");

// sassをコンパイルするタスクの作成
gulp.task("sass", function() {
 return (
  gulp
   .src("src/sass/**.scss")
   .pipe(sass())
   .pipe(gulp.dest("dist/css/"))
 );
});

コードの内容についてそれぞれ解説していきます。

Sassコンパイルを実行

$ gulp sass

$ gulp --tasks

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

CSSではブラウザ対応していないスタイルに対して-webkit-や-moz-などのベンダープレフィックスを付与することで対応しなければなりません。

ですが、GulpにはSassをコンパイルする時点で自動的にベンダープレフィックスを付与してくれるパッケージがあります。

少しずつブラウザ間の差異はなくなっていて、ベンダープレフィックスを使う機会は減っていますが、対応しているか確認したり対応し忘れもあるので必ず使いたいパッケージです。

Gulpでベンダープレフィックスを付与するパッケージをインストールするためのコマンドはこちら。

$ npm i gulp-autoprefixer -D

インストールが完了したら先ほどのようにgulpfile.jsにタスクを追加しましょう。

const autoprefixer = require("gulp-autoprefixer");

// sassをコンパイルするタスクの作成
gulp.task("sass", function() {
return (
gulp
.src("src/sass/main.scss")
.pipe(sass({
outputStyle: "expanded"
}))
.pipe(autoprefixer())
.pipe(gulp.dest("dist/css/"))
);
});

最後に

これまでの手順でGulpを使ってSassのコンパイルを実行することができました。

Gulpでは他にもプロジェクトを効率よく進めるために便利なパッケージがたくさん用意されています。

今回は初心者向けにSassのコンパイルに特化した内容になりますので、もっと機能を拡張したい方は関連記事をご確認ください。

関連記事はこちら