LoginSignup
13
13

More than 3 years have passed since last update.

@yurippine(りりー)

gulpへの理解を深め、環境構築をしてみよう！

Last updated at Posted at 2020-03-05

はじめに

フロントエンドエンジニアとして働き始めたばかりの新米エンジニアです。

今回はフロントエンドに必須のタスクランナーであるgulpについてです。

自分自身、gulpをきちんと理解して使用しておらず、勉強しても時間が経過すると忘れると思ったので、今回はメモとして残す意味で、あとは誰かの役に立てば良いな思いながら書いて行こうと思います。

初心者の方、他のタスクランナーからgulpに移行しようと思っている方にも分かりやすく、gulpについて＆環境構築&実践の説明をしていきます。

主な内容

  • gulpとは
  • gulpで出来る事
  • 導入までの簡単な流れ
    • Node.jsとは
    • package.jsonとは
    • npmとは
  • 実際に環境構築してみよう
    • 1 . Node.jpのインストール
    • 2 . package.jsonファイルの作成
    • 3 . gulpをインストール
    • 4 . gulpfile.jsを作成
  • 準備：package.jsonの編集の仕方
  • 実践：gulpを動かそう！
  • さいごに

以上の流れで今回は進めていきたいと思います。

フォルダ構成

今回はデスクトップにいファイルを作成しました。

gulp-test
       ├ htdocs/
       │  └ index.html
       │   └ css/
       │      └ style.css
       └ src/
          └ scss/
              └ style.css

gulpとは

  • フロントエンド開発用のタスクランナーです。(ビルドシステムヘルパーと呼ばれる事もある)
  • タスクランナーとは、処理(タスク)を自動化で行ってくれるツールです。 gulpにはパッケージが沢山あり、プロジェクトに合わせて実行したい処理を組み合わせる事で、様々なタスクを実行できます。

つまり、普通だったら手間がかかるめんどくさい作業を、自動的に実行してくれるのがgulpと言う事です。

使用したい機能(パッケージ)を選択して導入するだけで、自分でカスタマイズした好きな機能で実装することができるのです。しかも案件ごとに。

なんて素敵なツールなのでしょう。

<参考サイト>
gulpの公式サイト：https://gulpjs.com/
リポジトリ：https://github.com/gulpjs/gulp

※開発の現場では、今回ご紹介するgulpとGruntがよく使用されます。
→gulpとGruntの違いについて詳しく知りたい方は「絶対つまずかないGulp入門」こちらの記事が分かりやすかったのでご参考までに。

gulpで出来る事

では、それほどめんどくさい作業をgulpが行ってくれるのか。
よく使用されるパッケージの例を挙げてみたいと思います。

SassやLESSなどのコンパイル

SassやLESSなどのCSSプリプロセッサ（CSSメタ言語）を自動的にCSSにコンパイルしてくれます。
※コンパイル：ソースコード(プログラミング言語)を、オブジェクトコード(コンピュータが実行可能な形式)に変換する作業
※エディタの拡張機能で、コンパイルを自動的に行ってくれる物もあります。

ベンダープレフィックスの自動付与

IE対策などで使用する、CSSのベンダープレフィックス(-webkit-や-ms-がついたcssコード)を自動的に吐き出してくれます。

<参考記事>
ベンダープレフィックスとは

画像の圧縮

ウェブサイトを表示するロード時間を減らす方法として、画像の圧縮があります。
サイトからの離脱率を減らし、ユーザーに気持ちよくサイトをみてもらう為にも、画像の圧縮は必須です。
手作業でtinypngやtinyjpg、jpegminiでも圧縮する事もできますが、gulpはその作業を自動的に行ってくれます。

CSSやJavaScriptなどのミニファイ

JavaScriptやCSSなどのコードの中の不要な改行、インデントなどを削除し、動作はそのままで圧縮・軽量化してくれます。
これもロード時間を減らす方法として大事な作業です。
※ミニファイ：圧縮,軽量化

ブラウザーシンク

HTML/CSS/JSを保存するたびに、ブラウザをリロードしてくれます。

他にも多くのパッケージがgulpには存在しているので、お好みでカスタマイズして使用できます。

gulpのパッケージが書いてある一覧ページがありましたので、ご参考にどうぞ。
gulp-パッケージ一覧 : https://qiita.com/oreo3@github/items/0f037e7409be02336cb9

導入までの簡単な流れ

gulpを導入するまでの流れ、説明を大雑把にしていきます。

　1 . Node.jsのインストール
　2 . package.jsonファイルを作成
　3 . gulpをインストール

Node.js とは

JavaScriptは本来クライアントサイドで動く言語であり、HTMLで書かれたページに動きをつけたりする。
→Node.jsはサーバサイドで動くJavaScriptである。

package.jsonとは

npmではpackege.jsonというファイルで依存関係のあるパッケージを一括インストールできたり、タスクも管理できる。
必要な設定事項を記述することで、簡単にプロジェクトの管理や環境構築を行うことができるのだ。

npmとは

正式名称は"Node Package Managernpm"と言い、Node.jsのパッケージを管理することができる。
Node.jsをインストールすることで自動的にインストールされます。

環境構築してみよう

次は、実際にコマンドを打ってgulpを使用してみましょう。

1. Node.jsをインストール

スクリーンショット 2020-01-22 0.05.11.png

こちらのリンクからNode.jsをダウンロードします。
↓
Node.jsの公式サイト
https://nodejs.org/ja/

Windowsの方はこちらからです
↓
Node.jsダウンロードページ
https://nodejs.org/ja/download/

ちなみに、ダウンロードの際は推奨版を入れる事をオススメします！！！
(最新版だとパッケージで対応してない場合がある)

ダウンロードが終わったら、保存されたファイルを解凍して開いてくださいね。
スクリーンショット 2020-01-22 0.11.24.png

インストールが完了したらターミナルを起動し、以下のコマンドを実行します。

node -v   ・・・Node.jsのバージョンの確認
↓
v12.13.1

自身がダウンロードしたバージョンが表示されたら完了です。

＊余談

ちなみにですが、ターミナルの使用方法は複数あり、

  • 「ターミナル」Macに入ってるアプリケーション
  • 「iTerm2」
  • エディタ(VScode,Atom,Sublimeなど)

から使用することが多いです。
(私はエディタ:VScodeからがほとんど)

詳細はこちらをご参考にしてください◎

VSCodeでターミナルを起動するショートカット：https://utano.jp/entry/2018/01/visual-studio-code-terminal-window/
Macターミナルは何ができる？初心者向けの使い方と困った時のQ&A：https://www.sejuku.net/blog/4202

2.package.jsonファイルを作成

パッケージをインストールするにあたり、まずはプロジェクトディレクトリ配下にpackage.jsonファイルを準備します。

この記事の冒頭に表記したフォルダ構成のところを参考にしてくださいね。

cdコマンド(=移動する)でプロジェクトのディレクトリの場所まで移動します（パスは適宜変更して下さい）。

cd \Users\{ユーザ名}\Desktop\gulp-test

今回はデスクトップにgulpを導入したいファイル(gulptest)を作成したので、上記のようなパスになりました。

次です。
node.jsをインストールをするとnpmコマンドが使えるようになっています。
package.jsonファイルを作成するために、このコマンドを入力してください。

npm init -y

この表示が出てきたら成功です。

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

-yをつけたことで、設定がデフォルトになりました。

もし、npmをインストール済みであれば、アップデートします。

npm update -g npm

(npmのアップデートはnpm自体で実行)
もし、permissionがなんとか〜〜〜ってエラーが出たら、頭にsudoをつけて実行してみてください！

sudo npm update -g npm

sudoコマンドは、スーパーユーザー:root（や他のユーザ）の権限でコマンドを実行するときに使用します。

わざわざユーザーを切り替えずに、他のユーザーの権限で操作が可能なので、非常に便利で、必殺技みたいな感じです。(乱用禁止)

npmのバージョンも確認してみましょう。

npm -v   ・・・npmのバージョンの確認
↓
6.13.6

3. gulpをインストール

やっと、gulpを導入するところまで来ました。

gulpのダウンロード

npm install -D gulp　　　・・・ローカルインストール
npm install -g gulp　　　・・・グローバルインストール

両方のコマンドを打って導入します。

ローカルインストールはそのプロジェクトのフォルダ内でのみ利用でき、グローバルインストールはそのマシン上のどこからでも利用できるようになるります。
デフォルトはローカルインストールされるようになっており、グローバルインストールしたい場合は-gオプションを付けて実行します。

<参考記事>
gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"

node_mosulesというファイルが作成されていたら成功です!!!

先程まではpackage.jsonファイルしかありませんでしたが、
gulを導入したことで、ファイルが3つに増えているかと思います。

　package.json
　node_modules
　package-lock.json

また、package.jsonに記載されてる内容を確認すると
devDependecesという項目が追加されてるかと思います。

jackage.json
{
  "name": "gulp-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

下二行ですね。ちゃんと、インストールしたgulpのバージョンも記載してあります。"gulp": "^4.0.2"

ここまで来たらあと少しです！

4.gulpfile.jsを作成

gulpを使用する準備ができたので、
具体的に実行するタスク内容を設定するgulpfile.jsを他のファイルと同じディレクトリに作ります。

touch gulpfile.js

中身は空ですがgulpfile.jsが作成されたかと思います。
touchはgulpに関係はなく、ターミナルのコマンドでファイルを新規作成するものです。

この時点でディレクトリ内に存在してるファイルは
　
　node_modules
　package-lock.json
　package.json
　gulpfile.js

の4つです。

フォルダの中身を確認してみましょう。

gulp-test
       ├ htdocs...
       ├ src...
       ├ node_modules
       ├ package-lock.json
       ├ package.json
       └ gulpfile.js

desktop配下のgulp-testというファイルの中に、4つのファイルが追加されてるのがわかります。

最後にgulpのバージョンを確認してみましょう。

gulp -v   ・・・gulpのバージョンの確認
↓
CLI version: 2.2.0
Local version: 4.0.2

もし、Localのバージョンが下記のようにUnknownになっていたら

CLI version: 2.2.0
Local version: Unknown

以下のコマンドを入力すれば大丈夫です◎

sudo npm install --save-dev gulp

gulpfile.js内に
以下のコードを入力することで、gulpが使用できるようになります。

gulpfile.js
var gulp = require("gulp");

これで、gulpを使用する一通りの作業はできたと思います。

お疲れ様でした！！！

準備：gulpfile.jsの編集の仕方

コマンドラインで必要なパッケージをインストール

以下のコマンドを使用する事で、パッケージをインストールできます。

npm install --save-dev {パッケージ名}

また、コマンドは以下のように省略することも可能です。

//"install" → "i"
//"--save-dev" → "-D"

npm i -D gulp {パッケージ名}

gulpfile.jsでタスクを作成

package.jsに記入するタスクの書き方の例です。

gulpfile.js
//使うパッケージの宣言
var {変数} = require('{パッケージ名}');

//個々のタスク
gulp.task('{タスク名}', function(){
  //実行される処理
});
//watchタスク… タスク名は任意。「gulp.watch()」でファイルの状態を監視・タスク実行
gulp.task('watch', function(){
  gulp.watch('{監視したいファイルのパス}', [{実行するタスク名}]);
});
//defaultタスク… 「npx gulp」コマンドで実行するタスクを設定
gulp.task('default', ['{タスク名}', 'watch']);

地味に大事な余談

パッケージをダウンロードする時のコマンドnpm i -D gulp {パッケージ名}の-Dを実行することで、package.jsonのdevDependenciesインストールしたパッケージ名とバージョンが記録されます。
-Dつけない場合はdependenciesに記録されます。

devDependenciesは主に開発用。(gulpやsassなど)
dependenciesは表側。(jqueryやslickなど)

実践：gulpを動かそう！

では、実際にgulpを動かしてみましょう！
私がいつも使用するのはこれらのパッケージです。

  • SASSのコンパイル
  • ベンダープレフィックスを自動的に付与
  • エラーが原因でタスクが強制停止するのを防止

この3つを行うために必要なgulpfile.jsを書きたいと思います。

まずは、ターミナルに以下のコマンドを実行して、パッケージをインストールします。
※省略した形で書きます。

npm i -D gulp 
npm i -D gulp-sass 
npm i -D gulp-postcss 
npm i -D gulp-autoprefixer 
npm i -D gulp-sass-glob 
npm i -D gulp-csscomb

全部打つのは面倒なので、もっと省略した形があります。
以下のようにパッケージごとに半角で区切って一行にまとめて書くことで、一括インストールすることも可能です。

//npm i -D {パッケージ} {パッケージ} {パッケージ}
//例 ) npm i -D gulp gulp-sass gulp-postcss gulp-autoprefixer gulp-sass-glob gulp-csscomb

実行します。

次に、gulpfile.jsにはタスクの内容を記述します。

gulpfile.js
var gulp = require('gulp'); //gulpを使用する宣言
var sass = require('gulp-sass'); //SASSの使用
var postcss = require('gulp-postcss');
var csscomb = require('gulp-csscomb'); //cssを綺麗に並び替える
var sassGlob = require('gulp-sass-glob'); // Sassの@importにおけるglobを有効にする


gulp.task('sass', function(){
return gulp.src('src/**/*.scss')
    .pipe(sassGlob()) 
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
    .pipe(postcss([
        require('autoprefixer')({grid:true}),
    ]))
.pipe(gulp.dest('htdocs/css/'))
.pipe(csscomb());
});

gulp.task('w', function(){
gulp.watch('src/**/*.scss', gulp.series('sass'));
});

確認：gulpが実行されているか見てみよう！

それでは現在のディレクトリの確認です。
構造はこのようになっているかと思います。

gulp-test
       ├ htdocs/
       │  └ index.html
       │   └ css/
       │      └ style.css
       └ src/
       │   └ scss/
       │       └ style.css
       ├ node_modules
       ├ gulpfile.js
       ├ package.json
       └ package-lock.json

それでは、実際にsassがコンパイルされるか、確認してみたいと思います。
src/scss/style.cssに以下のコードを記入しましょう。

style.scss
.box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: plum;
}
.button {
    transition: 0.3s;
    background-color: grey;
    color: #000;
    &:hover {
        transition: 0.3s;
        background-color: #fff;
    }
}

そして、実行するために、このコマンドを入力します。

gulp w

すると、

htdocs/css/style.cssには見事コンパイルされ、ベンダープレフィックスが付与されたコードになってるかと思います。

style.css
.box {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  color: plum;
}

.button {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: grey;
  color: #000;
}

.button:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: white;
}

command + sで保存する必要もなく、
stylle.scssの内容を変更するだけで自動的にコンパイルされるのもわかるかと思います。

自動的に更新されるのはとても便利ですね。

自分の好きなプラグインを見つけて、オリジナルのgulpを作ってみましょう！

お疲れ様でした！！！

おまけ

今までの流れが、初めてgulpを使用する人に向けた内容です。

一度gulpの環境構築をしたら、
2回目以降は初回と少し違った流れになります。

主に違うのは
①Node.jsをインストールしなくて良い
②nodeとnpmとgulpのバージョンを確認して、必要があればアップデートする
くらいです。

npmのアップデートの時に、npm audit fixというエラーが出る時があるので、
私が以前書いた記事を先に軽く読んで、参考にしていただけると幸いです。

<参考サイト>
https://qiita.com/yurippine/items/e1ac2156b73a5d4098dd

昔gulpを使用していたら大体ここら辺のコマンドを実行したら動きます◎

npm init -y
npm install -D gulp
gulp -v
npm install -D gulp gulp-sass

ご参考までに。

さいごに

gulpの使い方は、なんとなくご理解いただけたでしょうか？
最初は私も訳がわからなかったのですが、最近は使っていくうちに理解できるようになってきました。

フロントエンドは毎年新しい技術が出てくるため追いつくのが大変ですが、がんばっていきましょう><!!!

実践できるか何度も確認して記事にしていますが、間違いや不備等見つけた方がいらっしゃいましたら
ご連絡いただけると幸いです。

参考サイト一覧

https://www.go-next.co.jp/blog/web/soft_tool/13407/#Gulp
https://parashuto.com/rriver/tools/updating-node-js-and-npm
https://ics.media/entry/3290/

13
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
13