Gulp
Gulpはいろいろと自動化などができるらしい。
Gulpの導入
Node.jsをインストールする。
インストーラーを使ってインストールするだけなので特に問題なし。
—
npm(node package manager)＝node.jsのパッケージを管理するツール
世界中の人がnode.jsを便利に使うためのツールを開発していて、それを共有している。
https://www.npmjs.com/
パッケージ＝ライブラリみたいなもの。誰かが作ったライブラリがフォルダなどに収められたそのひとかたまり。
パッケージは、バージョンアップなど更新される可能性があるためダウンロードしてそのものを使うのではなく、ネット上にあるものを参照して使う。dependency (depend=依存する)と呼ばれる。
ただ、「node_modules」フォルダにそのものが仮置き場としてダウンロードされる。ネット環境がない時にも動くようにかな？通常はGit ignoreなどでアップしないようにする。
npm init
これでまず、パッケージの枠が作られる。枠と言うか、最低限の基本情報というか。
パッケージとは、みんなが作ってるライブラリのことだけども、自分のプロジェクトもパッケージとして作成する。
—
できたこと
Gulpは使わずに、
browser-syncでリアルタイムリロードはできた。
browser-sync start --proxy "localhost" --files "**/*"
コマンドプロンプトで、MAMPのhtdocsに移動して、上のコマンドを実行する。
browser-syncにはserverモードとproxyモードがあって、serverモードは静的なページしか実行できない。
Wordpressなどのプログラムで動的に作るページは、ローカルのサーバーにproxyで接続して表示させる。
proxyというのがいまいちわかってないのだけど。
MAMPでは、バーチャルホストというものの設定を行っていて、サブドメインみたいな感じでドメインからファイルパスを参照できるようになっているんだけど、browser-syncではバーチャルホストの設定は反映されないみたいで、一番上の設定をlocalhostで参照できる。
このあたりは、VirtualHostの設定が間違っているのかbrowser-syncの動きがおかしいのかわからない。
とにかく、上のコマンドを実行するとwordpressのページでもリアルタイムリロードは可能。
画面の遷移をすると、VirtualHostの設定でURLがbrowser-syncしなくなってしまう。
環境を作って試してみようと思ったんだけど、やめました。
自動化を自由にできるのはやらないといけないところではあるので、不要というわけではありません。
sassとか、ブラウザのオートリロードとかはそこまで必要性を感じない。
このあたりはvscodeの拡張機能でやればいいような気がする。
Gulpの問題点は、不要なファイルがたくさんできてしまうというところだと思う。
開発の便宜のためのファイルを開発フォルダーの中にたくさん作ってしまうというのはあまり気持ち良くない。
こっちの方が良さそう。
