gulpって何？どう読むの？gulpっていってるじゃんgulpって、そうgulp、、、っと。
まぁ英語なんだから日本語にするのは野暮なのかもしれません、ただ、、人と対峙して話す際やはり「音」にしなければいけないという事で調べると「がるぷ」と言うらしい。

こういった制作ツールに関して、会社環境、自宅環境、色々と案件に合わせたPC環境となる立場の当人にとって環境作成が面倒そうで・・・
けっこう触っているか聞かれるとそうでもない、そんな私が書いてるので内容が正しいか若干不安ではありますが「自身の覚書」として残すこととします。

gulpとは

https://gulpjs.com/

サイトにある説明には・・・
「gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.」

Google翻訳：gulpは開発ワークフローで苦労したり時間のかかるタスクを自動化するためのツールキットです。

説明簡単すぎだろ、、、わかんねーよ。

 

このgulpとはローカルの開発環境でhtmlを書き出す、Node.jsベースのビルドツールで、PHP、CMSを使わないページ作成に必要になる（はず）。

※要はNode.jsで動いているウェブサイト(html,css,js等)の書き出しツールだな。
サーバー負荷を考慮したコンテンツ制作の際は優秀な感じ。

各種ビルドツールの根本は変わらないので、どんなビルドツールであっても一つ覚えていて損は無いのではないでしょうか。
（古今、この手のツールは乗り換えが多々発生して詳しくなっても・・・と、個人的に思ってます。）

下記環境構築のやgulpの実行等はコマンドプロンプト（PowerShellでも良いので）実行してください。

 

node、npmのインストールと最新化

早速ですが、gulpの動作環境を作成する上で必要となるnode、npmのインストールと最新化をしていきます。

//node.jsインストール確認
node -v

無ければ下記URLよりインストーラーのダウンロードとインストール
https://nodejs.org/en/

//npmインストール確認
npm -v

//最新化
npm install -g npm

//npm設定ファイルの作成
npm init

gulpのインストール

//作業ディレクトリに移動（対象となるディレクトリのパスを入れて下さい）
cd C:\Users\????\gulp_test

//gulpグローバルインストール
npm install -g gulp

//gulpローカルインストール
npm install gulp --save

各プラグインのインストール

適当にプラグインを入れていきます、良く分からないけど追々必要になるかもという思いで。
（一括でプラグイン入れれるコマンドあるかも、、、）

//テンプレートエンジン
npm install --save-dev gulp-ejs

//CSSベンダープレフィックス関連
npm install --global postcss-cli autoprefixer

//CSSベンダープレフィックス
npm install --save-dev gulp-autoprefixer

//ブラウザ動作関連
npm install --save-dev browserify
npm install --save-dev watchify

//vinyl変換
npm install --save-dev vinyl-source-stream

//Browserify用のパッケージ、ES6の変換対応
npm install --save-dev babelify

//ES6の新しい機能などを利用するためのES5向けのライブラリ
npm install --save-dev babel-core

//最新 ECMAScript を指定された環境に基づき最小限 ES5 に変換
npm install --save-dev babel-preset-env

//ファイルの更新を即座にブラウザーに反映
npm install --save-dev browser-sync

//ファイル変更時に任意のコマンドを実行するツール
npm install --save-dev chokidar-cli

//CSS3のメディアクエリをひとまとめにするパッケージ
npm install --save-dev css-mqpacker

//CSSの書き出し時の圧縮
npm install --save-dev csswring

//デフォルト処理(不要じゃないかな…)
npm install --save-dev default

//ファイルの結合
npm install --save-dev gulp-concat

//watchの停止を予防
npm install --save-dev gulp-plumber

//ファイル名を置き換え、ハッシュや関数の受け渡し
npm install --save-dev gulp-rename
npm install --save-dev gulp-uglify

//sassをcssにコンパイル
npm install --save-dev gulp-sass
npm install -g node-sass

//並列実行？
npm install --save-dev npm-run-all

//開発用Webサーバーの立ち上げに使用
npm install --save-dev gulp-webserver

まとめ

環境作成としてはここまでです。
（次回はgulpの設定、実行ができる所まで進めたいところ。。。）