/wp-webpack-set

WordPressを使用したサイトを制作する場合にはこのコーディングセットを使用します。WordPressを組み込むことがわかっている場合には可能な限り初めからこちらを使用して、開発を進めてください。

Primary LanguageJavaScript

EISHIN's Coding Set for WordPress

本リポジトリを使用することでよりスムーズにコーディングができます。

このコーディングセットを使用してできること

  • Dart Sass を css にコンパイルし、Minify することができます。
  • Babel を使用して JavaScript を ES5 程度までトランスパイルできます。
  • BrowserSync を使用して、ローカル環境を立てることができ、監視対象のファイルをいじると自動リロードされます。(ホットリロード)
  • WebPack を使用して JavaScript ファイルの依存関係を解消し、少ないファイル数にバンドルすることができます。
  • 画像ファイルを圧縮することができます。

主な使用ツールについて

使用方法

以降は macOS を使用したインストール方法になります。

  1. Node.jsの LTS 版をインストールします。インストーラーの指示に従って進んでいけば大丈夫です。
  2. Node.js がインストールできたらターミナルで npm install --g yarn を実行します。yarn がインストールできます。
  3. yarn がインストールできたら、Local by Flywheel で開発していく Wordpress フォルダを立ち上げ、そこのトップレベルへ本リポジトリを git clone でローカル環境に複製します。（リポジトリのクローンについてはこちら）
  4. Local のトップディレクトリにリポジトリを clone してディレクトリが app conf logs wp-webpack-setのようになったら、cd wp-webpack-setでカレントディレクトリを移動する。
  5. カレントディレクトリを移動できたらyarn installで必要なパッケージをインストールする。
  6. パッケージがインストールできたらyarn listを打ち込み、インストールしたパッケージが表示されれば大丈夫です。
  7. ローカルサーバーを立てるにあたり webpack の設定を少しいじる必要があるので、以降の指示を読んで進めてください。

webpack の設定について

webpack で最初に設定すること

  1. webpack.config.js ファイルに行きます。
  2. let DIRBASEをコメントに従って設定します
  3. projectJsオブジェクト内でエントリーポイントを指示に従って編集しましょう。
  4. 以上です。

基本的な webpack 実行コマンド

一通り下記コマンドを実行してみましょう。 ビルドしたファイルはdevelopThemeNameで設定したフォルダ配下にassetsフォルダとしてビルドされます。また

実行したい内容 実行コマンド
開発用にビルド＆ローカルサーバーを立てる yarn run dev
商用にビルド yarn run build
商用にビルドしてローカルサーバーを立てる yarn run build:server
開発用にビルドする yarn run webpack:dev

WordPress を使用しない通常の HTML ファイル用のコーディングセットとの違い

  • CSS,JS の読み込み
    CSS と JS は自動でlink,scriptが埋め込まれていましたが、本コーディングセットでは自分でパスを設定する必要があります。
  • JavaSript ファイルのビルド
    JavaScript ファイルのビルドは読み込む php ファイル名と一致させる必要はありません。（理由は、自身でパスを設定する必要があるため）どの JavaScript ファイルをビルドするかは webpack.config.js を編集します。
  • WordPress のローカルサーバーを立てるためにLocalを使用します

webpack 内で使用しているツール

下記は webpack 内で使用している主なツールです。各ツールごとにさまざまな設定ができますが、ここでは割愛します。

License

License: MIT License
Contributors: KenyaMasuko