Gulpインストール手順

Gulp(ガルプ)とは

gulpは、開発ワークフローの中で面倒な作業や時間のかかる作業を自動化するためのツールキットです。

Node.jsを使って、CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなどのさまざまな作業を自動化することができます。

Node.jsのインストール

Gulpを使うためにはNode.jsが必要です。
公式サイトよりNode.jsのインストーラーをダウンロードします。ダウンロードページには「推奨版」と「最新版」の2つがありますが、まずは「最新版」をダウンロードしてください。


最新版の「node-v11.9.0-x64.msi」をダウンロード後は
手順にしたがってインストールをしてください。


package.jsonの作成

この「 package.json 」を作成することで簡単にgulpやCSS,HTML,画像圧縮のパッケージをインストール管理することができます。

今回は自分がよく使っているパッケージをまとめてみましたので、以下のコードをコピーして ファイル名 package.json で保存してください。

{
  "name": "gulpimg",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "images": "gulp images"
  },
  "author": "esample",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-changed": "^3.2.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-data": "^1.3.1",
    "gulp-ejs": "^3.2.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "gulp-until": "^0.1.3",
    "gulp-watch": "^5.0.1",
    "imagemin-mozjpeg": "^7.0.0",
    "imagemin-pngquant": "^5.0.1"
  },
  "dependencies": {}
}

作業用のフォルダを作成

gulpを使ってcssやhtmlや画像の圧縮をするために
作業用フォルダーを作成しましょう。

フォルダ名は何でもよいです。
今回は「gulpimg」というフォルダを作成していれています。

gulpでは元になるソース(htmlやcssや画像)を入れるフォルダと
その出力先の2つのフォルダが必要です。

わかりやすく
「src = source(送り元)」というファルダと
「dest = destination(行き先)」という2つのフォルダを作成しています。

パッケージのインストール

ここまで準備が整ったらいよいよパッケージのインストールです。
package.jsonをすでに作成しているのでここはすごく簡単にできます!

まずは、エクスプローラーの左上にある「 ファイル 」メニューから「WindowsPowerShell」を開きます。

※macの場合は「ターミナル」というツールになります。

このようなコマンドラインの画面が立ち上がるので

npm install

と入力してEnterしてください。
自動でパッケージのインストールがはじまります。

インストールが終わると
新たに「node_modules」「package-lock.json」
追加されているのが確認できると思います。

この2つのフォルダ/ファイルが追加されていれば
パッケージのインストール完了です。

次回はGulpの使い方に進みます!

Sidebar