テーマの変更の自動展開

テーマの変更の自動展開

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

変更を行うたびにテーマを手動でデプロイする必要があることに気づいたかもしれません。 これは、開発プロセス中に退屈になる可能性があります。 gulp watch タスクを使用すると、完全に再デプロイすることなく、テーマの変更をプレビューできます。

テーマへの変更を自動的にプレビューするには、次の手順に従います。

  1. サーバーで 開発者モード 有効にします。 これを有効にしないと、gulp監視タスク は機能しません

  2. テーマのルートフォルダーに移動し、 gulp watchを実行します。 これにより、アプリケーションサーバーのプロキシ(http:// localhost:9080)がセットアップされ、ブラウザーの新しいウィンドウで開かれます。 また、ローカルネットワークに接続されているすべてのデバイスのアプリサーバーを表示するためのIPアドレスも提供します。 ブラウザは、指定されたIPアドレスを使用するすべてのデバイス間で同期されます。

    図1: gulp watch タスクを実行して、テーマへの変更を自動的にデプロイします。

    テーマの liferay-theme.json ファイルに webBundleDir プロパティが存在することを確認することで、監視タスクが実行されていることを確認できます。 監視する値 `が必要です。

 {
   "LiferayTheme": {
     "appServerPath": "C:\\Users\\liferay\\opt\\Liferay\\bundles\\7.1-master-bundle\\bundles\\tomcat-8.0.32",
     "deployPath": "C:\\Users\\liferay\\opt\\Liferay\\bundles\\7.1-master-bundle\\bundles\\deploy",
     "url": "http://localhost:8080",
     "appServerPathPlugin": "C:\\Users\\liferay\\Desktop\\projects\\themes\\7-1-themes\\my-liferay-theme\\.web_bundle_build",
     "deployed": true,
     "pluginName": "my-liferay-theme",
     "webBundleDir": "watching"
   }
 }
`

3

テーマを変更して、ファイルを保存します。 更新されたファイルはビルドされ、コンパイルされ、ポート 9080直接コピーされます。 CSSの変更はライブで展開されるため、ページをリロードする必要はありません。 JSとテンプレートの変更について、 あなたがしなければならない 変更を確認するには、ブラウザをリロードしてください。

![図2:監視タスクは、変更が展開されたことを通知します。](https://liferay-support.zendesk.com/hc/article_attachments/360013313311/theme-dev-watching-themes-gulp-watch-auto-deploy.png)

4

プレビューした変更に満足したら、テーマをアプリサーバーに展開して変更を適用します。

関連トピック

テーマのアプリサーバーの構成

既存のテーマのファイルをコピーする

テーマの展開

« テーマの拡張機能リストテーマ用に再利用可能なコードを作成する »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています