カスタマイズでCSSとJavascriptリソースを最小化する方法

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

問題

• Liferayテーマビルダーを使用してCSSとJavascriptリソースの最小化を実行する方法。

環境

• Liferay DXP 7.4

解像度

• Gradleから gulpビルドテーマで

  基本的には、Gradleテーマのビルド・プロセスをgulpに置き換えることで、node.jsバージョンのビルド・プロセスと同一ではないにしても、非常に似たものにすることだ。

  1. ファイルシステムのどこかに空のフォルダを作る。
  2. この空のフォルダで、環境のセットアップとテーマの作成から yo liferay-themeのステップまで、すべての指示に従い、最初に作成したGradleベースのテーマと同じテーマ名とテーマベースを指定することを確認します。
  3. 生成されたテーマから以下のファイルをGradleベースのテーマにコピーする。
     
     • liferay-theme.json
     • package.json
     • package-lock.json
  4. Gradleベースのテーマのトップ・レベルに新しいファイルgulpfile.jsを作成する：

  'use strict';
  
  var gulp = require('gulp');
  var liferayThemeTasks = require('liferay-theme-tasks');
  
  liferayThemeTasks.registerTasks({
   gulp: gulp,
   pathDist: 'build/libs/',
   pathSrc: 'src/main/webapp/'
  });

  • Liferayテーマジェネレータをインストールするときに、gulp経由で直接ビルドします。 次に、gulp.jsファイルの先頭に以下の行を追加する：
    

  process.env.NODE_ENV = 'production';

  • ドキュメントのbuild.gradleの最後に以下を追加する：
    
    • NODE_ENV変数がproductionに設定されていることを確認し、gulp buildがCSSをminifyするようにする。
    • buildCSSタスクをgulp buildへの呼び出しに置き換える。
    • すでにgulp buildでwarを生成したので、warタスクのアクションをクリアする

  apply plugin: "com.liferay.node"
  tasks.getByPath('packageRunBuild').configure {
  environment "NODE_ENV", "production"
  }
  tasks.getByPath('buildCSS').configure {
  actions.clear()
  finalizedBy packageRunBuild
  }
  tasks.getByPath('war').configure {
  actions.clear()
  }

  • 通常通りブレードgwを展開する。

追加情報

• CSSとJavaScriptリソースの最小化