Liferayテーマタスクの上書きと拡張
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
Liferay Theme Generatorで作成されたテーマは、テーマの開発とビルド（ビルド、デプロイ、監視など）に必要な標準機能を提供するいくつかのデフォルトのgulpテーマタスクにアクセスできます。 ただし、テーマをサーバーにデプロイする前に、テーマのファイルで追加のプロセス（JavaScriptファイルの縮小など）を実行することもできます。 LiferayテーマジェネレーターのAPIは、 hookFn プロパティを公開します。これにより、デフォルトのgulpテーマタスクにフックして、独自のロジックを注入できます。
デフォルトのLiferayテーマタスクにフックするには、次の手順に従います。
-
フックまたは上書きするgulpタスクまたはサブタスクを特定します。 タスクとそのサブタスクは、
liferay-theme-tasksパッケージのタスクフォルダー の[task-name].jsファイルにリストされています。 たとえば、gulpビルドタスクとサブタスクは、build.jsファイル定義されています。'build:clean', 'build:base', 'build:src', 'build:web-inf', 'build:liferay-look-and-feel', 'build:hook', 'build:themelets', 'build:rename-css-dir', 'build:prep-css', 'build:compile-css', 'build:fix-url-functions', 'build:move-compiled-css', 'build:remove-old-css-dir', 'build:fix-at-directives', 'build:r2', 'build:war', -
テーマの
gulpfile.jsファイルを開き、liferayThemeTasks.registerTasks（）メソッドを見つけます。 このメソッドは、デフォルトのgulpテーマタスクを登録します。hookFnプロパティをregisterTasks（）メソッドの構成オブジェクトに追加し、gulpインスタンスを必ず渡すようにします。liferayThemeTasks.registerTasks({ gulp: gulp, hookFn: function(gulp) { } }); -
hookFn（）関数内で、gulp.hook（）メソッドを使用して、フックするテーマタスクまたはサブタスクを指定します。before：またはafter：キーワードをプレフィックスとして付けることにより、タスクの前後にコードを挿入できます。 または、gulp.task（）メソッドを使用して、gulpタスクを上書きできます。 どちらのメソッドにも2つのパラメーターがあります。フックするタスクまたはサブタスクと、doneを呼び出すか、注入したいロジックを含むストリームを返すコールバック関数です。 以下に、構成パターンの例をいくつか示します。liferayThemeTasks.registerTasks({ gulp: gulp, hookFn: function(gulp) { gulp.hook('before:build:src', function(done) { // Fires before build:src task }); gulp.hook('after:build', function(done) { // Fires after build task }); gulp.task('build:base', function(done) { // Overwrites build:base task }); } });
以下の例は、 build：war サブタスクの前に起動し、テーマの build フォルダーのJavaScriptファイルを読み取り、 gulp-uglify モジュールでそれらを縮小し、 ./build/js 戻します。フォルダー、 done呼び出し、最後にJavaScriptが縮小されたことをログに記録します。 従うには、テーマの gulpfile.js を以下に示す内容に置き換え、 gulp-uglify モジュールと fancy-log モジュールをインストールし、 gulp deployを実行します。
'use strict';
var gulp = require('gulp');
var log = require('fancy-log');
var uglify = require('gulp-uglify');
var liferayThemeTasks = require('liferay-theme-tasks');
liferayThemeTasks.registerTasks({
gulp: gulp,
hookFn: function(gulp) {
gulp.hook('before:build:war', function(done) {
// Fires before build `war` task
gulp.src('./build/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
.on('end', done);
log('Your JS is now minified...');
});
}
});
次のような出力が表示されます。
[15:58:07] Finished 'build:r2' after 198 ms
[15:58:07] Starting 'build:war'...
[15:58:07] Your JS is now minified...
[15:58:07] Starting 'plugin:version'...
[15:58:07] Finished 'plugin:version' after 2.52 ms
これで、デフォルトのLiferayテーマタスクにフックして上書きする方法がわかりました！