Gulp導入からSassコンパイルするまで

Gulpとは?

GulpとはNode.jsをベースとしたビルドシステムです。
Sassやejsのコンパイル、画像の圧縮などを自動化できます。まずGulpを導入するにはNode.jsのインストールをします。

Gulp

Node.jsのインストール

まずは以下のリンクから（Node.jsの公式サイト）node.jsをインストールします。
https://nodejs.orgen/
インストールが完了したらターミナルを開き、以下コマンドを実行します。
バージョンが表示されたらインストール成功です。

node -v
PowerShell
Node.js

プロジェクトフォルダを作成

gulpのプロジェクトフォルダーを作成します。
任意の場所で構いませんが、ここでは ユーザー名/サイト 内にworksというフォルダーを作成しました。

package.json を作成

ターミナルを開き以下コマンドを入力し、先程作成したプロジェクトフォルダworksのディレクトリへ移動します。

cd ~ works
PowerShell

移動したら以下コマンドを入力します。

npm init
PowerShell

入力すると以下のように質問が続きますので任意の値を入力してください。後で変更できるので、とりあえずENTERを押すだけでもOKです。
全ての入力が終わるとpackage.jsonが作られます。

$ npm init...name: (works) testversion: (0.0.0)description: 任意の名前entry point: (index.js)test command:git repository:keywords: gulp,ligauthor: frontainerlicense: (ISC) MITAbout to write to /Users/XXXX/works/package.json:{ "name": "test", "version": "0.0.0", "description": "任意の名前", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "gulp", "lig" ], "author": "frontainer", "license": "MIT"}Is this ok? (yes)
PowerShell

Gulp.jsをインストール

いよいよ、gulp.jsをインストールします。
以下コマンドを実行します。

npm install gulp -g
PowerShell

以下コマンドでローカルにもインストールします。
–save-devとつけることで、このパッケージを開発用パッケージとしてインストールすることができます。

npm install gulp --save-dev
PowerShell

先程作成した、package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されているのを見ることができます。今回はdevDependecesにGulpが追加されています。

"devDependencies": { "gulp": "^X.X.X"}
JavaScript

package.jsonに記載されたパッケージは次回以降、npm installというコマンドを実行するだけでインストールすることができます。
複製する場合や複数人で作業する場合などは、このpackage.jsonを用意すれば、必要なパッケージがすぐにインストールできます。

Sassのコンパイル

GulpでSassをコンパイルできるようにするためにnpm install --save-devコマンドを使って、ローカルにインストールします。

npm install gulp-sass --save-dev
PowerShell

次にSassをコンパイルするタスクを作成します。
タスクを作成するには、プロジェクトファイル直下にgulpfile.jsというファイルを作成する必要があります。
Sassのコンパイル処理は、gulpfile.jsファイルに下記のコードを記述します

const gulp = require("gulp");const sass = require("gulp-sass");gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(sass()) .pipe(gulp.dest("./css"));});
JavaScript

作成したタスクを実行するには、以下のコマンドを実行します。

gulp sass
PowerShell

タスクを実行すると、cssフォルダーにコンパイルされたCSSファイルが書き出されます。
以上で、Gulpを使ったSassのコンパイルができました。

read next