gulpの環境作成(Win10)
gulpって何?どう読むの?gulpっていってるじゃんgulpって、そうgulp、、、っと。
まぁ英語なんだから日本語にするのは野暮なのかもしれません、ただ、、人と対峙して話す際やはり「音」にしなければいけないという事で調べると「がるぷ」と言うらしい。
こういった制作ツールに関して、会社環境、自宅環境、色々と案件に合わせたPC環境となる立場の当人にとって環境作成が面倒そうで・・・
けっこう触っているか聞かれるとそうでもない、そんな私が書いてるので内容が正しいか若干不安ではありますが「自身の覚書」として残すこととします。
gulpとは
サイトにある説明には・・・
「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の設定、実行ができる所まで進めたいところ。。。)