Gulpとは?
GulpとはNode.jsをベースとしたビルドシステムです。
Sassやejsのコンパイル、画像の圧縮などを自動化できます。まずGulpを導入するにはNode.jsのインストールをします。
Node.jsのインストール
まずは以下のリンクから（Node.jsの公式サイト）node.jsをインストールします。
https://nodejs.orgen/
インストールが完了したらターミナルを開き、以下コマンドを実行します。
バージョンが表示されたらインストール成功です。
node -v
プロジェクトフォルダを作成
gulpのプロジェクトフォルダーを作成します。
任意の場所で構いませんが、ここでは ユーザー名/サイト 内にworksというフォルダーを作成しました。
package.json を作成
ターミナルを開き以下コマンドを入力し、先程作成したプロジェクトフォルダworksのディレクトリへ移動します。
cd ~ works移動したら以下コマンドを入力します。
npm init入力すると以下のように質問が続きますので任意の値を入力してください。後で変更できるので、とりあえずENTERを押すだけでもOKです。
全ての入力が終わるとpackage.jsonが作られます。
$ npm init
...
name: (works) test
version: (0.0.0)
description: 任意の名前
entry point: (index.js)
test command:
git repository:
keywords: gulp,lig
author: frontainer
license: (ISC) MIT
About 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)Gulp.jsをインストール
いよいよ、gulp.jsをインストールします。
以下コマンドを実行します。
npm install gulp -g以下コマンドでローカルにもインストールします。
–save-devとつけることで、このパッケージを開発用パッケージとしてインストールすることができます。
npm install gulp --save-dev先程作成した、package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されているのを見ることができます。今回はdevDependecesにGulpが追加されています。
"devDependencies": {
"gulp": "^X.X.X"
}package.jsonに記載されたパッケージは次回以降、npm installというコマンドを実行するだけでインストールすることができます。
複製する場合や複数人で作業する場合などは、このpackage.jsonを用意すれば、必要なパッケージがすぐにインストールできます。
Sassのコンパイル
GulpでSassをコンパイルできるようにするためにnpm install –save-devコマンドを使って、ローカルにインストールします。
npm install gulp-sass --save-dev次に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"));
});作成したタスクを実行するには、以下のコマンドを実行します。
gulp sassタスクを実行すると、cssフォルダーにコンパイルされたCSSファイルが書き出されます。
以上で、Gulpを使ったSassのコンパイルができました。
