JavaScript - 2017-04-02

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

Gulpとは?

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

Gulp

Node.jsのインストール

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

node -v
Node.js

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

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のコンパイルができました。

Related Posts

Related Posts

gulp-ejsでdestする際に拡張子をejsからhtmlに変更する方法

2018-01-08

Sassで配列、連想配列の取得方法

2017-09-15

便利なSassの@mixin集めました

2017-03-31

WebStorageを使って初回アクセス時だけLoadingを表示する方法

2022-01-11