FooBar

note to self

MacでGulpを導入する方法

こんにちは。本日はgulpのインストールと簡単な使い方についてです。
タスクランナーのgulpを使えば定義した処理を自動で行ってくれます。

フロントエンド開発では最早鉄板のツールになっているので、簡易的ではありますが導入方法を残しておきます。

Homebrewのインストール

まずHomebrewをインストールするために以下のコマンドを打ちます。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

はじめて導入する方はもしかしたらxcodeをインストールしてくださいと言われるかもしれません。
今回は割愛しますが、過去記事で導入方法は書いてあるのでそちらを参考にしてください。

blog.otsukasatoshi.com

コマンドを打ってバージョンが確認できればOKです。

$ brew -v
Homebrew 2.1.11
Homebrew/homebrew-core (git revision 8eeed; last commit 2019-09-21)
Homebrew/homebrew-cask (git revision c27c8; last commit 2019-09-22)

これでHomebrewの導入は完了です。

node.jsのインストール

gulpを動かすためにnode.jsが必要になるのでインストールします。
node.jsをインストールするにはいくつか方法がありますが、今回はnode.jsのHPからインストールします。

https://nodejs.org/ja/

ここは言われた手順通りにインストールしていけばOKなので詳しい説明は割愛します。

また、過去記事でnodebrewを使ってインストールする方法も書いてるので、今後のことも考えてバージョン管理したい場合はそちらを参照してみてください。

blog.otsukasatoshi.com

node.jsのインストールが終わったら以下のコマンドでバージョンを確認してみましょう。

$ node -v
v○.○.○

npmのほうも

$  npm -v
○.○.○

node.jsとnpmの両方のバージョンが出ればOKです。

gulpのインストール

ここまででgulpを導入するための下準備ができたので、gulp本体をインストールをしていきます。

まずはgulpを導入したいプロジェクトを作りましょう。
すでに有る人は、そのディレクトリまで移動しましょう。

$ mkdir myproject 

$ cd myproject

移動したら以下のコマンドでpackage.jsonファイル生成します。

$ npm init -y

するといくつかの質問がされますが、ここは全てenterでOKです。
(ここの設定はいつでも変えられるため)

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

上記のような中身のファイルが作成されます。

次にgulp.jsをインストールしていきます。

まずはグローバルにインストールします。

$ npm install gulp -g

次にプロジェクトに対して導入します。

$ npm install  gulp --save-dev

これでgulpの導入はOKです!

gulp.jsを作成する

gulpが導入できたので、設定をしていきましょう。

gulpを導入したプロジェクト直下にgulp.jsというファイルを作成します。

このファイルにgulpで自動化したいタスクを記述していきます。

const gulp = require('gulp');

このコードはgulpを導入するためのコードとなります。

sassをコンパイルしてみる

今回は試しにsassをコンパイルするタスクを書いてみましょう。

以下のような階層をもつプロジェクトだと仮定します。

myproject
  ├── index.html
  ├── gulpfile.js
  ├── package.json
  └── sass
      └── style.scss

まずsassをcssに変換するためにgulp-sassをインストールしていきます。

$ npm install gulp-sass --save-dev

インストールしたらgulp.jsにタスクを書いていきます。

// ここから読み込むものを定義
const gulp = require("gulp");
const sass = require("gulp-sass");

// ここからタスクを書く
gulp.task("default", function() { 
   return(
      gulp.src("./sass/**/*scss")
      .pipe(sass())
      .pipe(gulp.dest("./css"));
   );
});

上記のタスク部分を簡単に説明すると

  • gulp.task(“タスク名”,function() {});でタスクを定義
  • gulp.src(“MiniMatchパターン”)でタスクを読み出したいファイルを指定。
  • pipe(したい処理)で上記のsrcで取得したファイルに処理をする。
  • gulp.dest(“出力先”)でタスクで処理をしたファイルを指定した出力先に払い出す。

といった流れです。

今回はsassをcssに変換する一つだけの処理ですが、pipe部分で処理は複数つなげることができるので、いくつかの処理も実装できます。

a {
font-size: 16px;
color: #brack ;
&:hover {
  font-size: 20px ;
  color: #red ;
  }
}

sassファイルに書いたものをコンパイルするには以下のコマンドを打ちます。

$ gulp 

ルートフォルダ直下に以下のようにcssファイルが払い出されていたら成功です。

a {
font-size: 16px;
color: #brack ;
}

a:hover {
font-size: 20px;
color: #red;
}

本日は以上です。