SFDC：Gulpをつかって静的リソース(.resorceファイル)を用意する方法

gulp-jsforce-deployを使って静的リソースをデプロイする方法の続きの記事です。前回は基本的な使い方を確認しましたが、今回はJSやCSSが入っているフォルダをGulpをつかって.resorceファイルに変換する方法について紹介します。

はじめに

JSやCSSをまとめたフォルダをZipに変換するため、『gulp-zip』をインストールします。

$ npm install --save-dev gulp-zip

※gulp-jsofrce-deployでは最初からインストール済みでした。

Zipファイルを.resorce拡張子に変更するため『gulp-rename』も必要になります。

$ npm install --save-dev gulp-rename

次のgulpfile.jsを用意しました。これでやりたかったことを実現できます。

それでは実際の流れを確認していきます。

処理の流れ

libフォルダにJSやCSSをまとめたフォルダを用意します。(複数処理できるか確認するため、２つのフォルダを用意しました。)

次のgulpコマンドを実行するとlibフォルダの中にあるフォルダが.resourceファイルに変換されてstaticresourcesフォルダに格納されます。

$ gulp setup-staticresources

gulp-jsforce-deployの機能をつかってデプロイを実行します。

$ foreman run gulp deploy

静的リソースに正しくデプロイされていることを確認できました。

Visualforceページで正しく読み込めるかも確認してみました。

問題なさそうです。

無事に、開発したJSやCSSを.resorceファイルに変換して静的リソースにアップロードすることができました。これさえできればAngularJSやReactをつかったVisualforceページの開発がやりやすくなると思います。

補足説明

.resourceファイルに変換するためにgulpfile.jsに追加した処理は次の部分です。

var fs   = require('fs');
var path = require('path');
var rename = require("gulp-rename"); 

// function.getFolders
var getFolders = function (dir) {
  return fs.readdirSync(dir)
           .filter(function (file) {
              return fs.statSync(path.join(dir, file)).isDirectory();
           });
}

// Setup Static Resourecs
gulp.task('setup-staticresources', function() {
  var folders = getFolders('./pkg/lib/');
  folders.map(function (folder) {
    // Setup resource
    gulp.src('./pkg/lib/' + folder + '/*')
      .pipe(zip(folder + '.resource'))
      .pipe(gulp.dest('./pkg/staticresources'));
    // Setup resource-meta.xml 
    gulp.src('./pkg/template/template.resource-meta.xml')
        .pipe(rename(folder + '.resource-meta.xml'))
        .pipe(gulp.dest('./pkg/staticresources/'));
  });
});

getFoldersの処理でlibフォルダ内のフォルダ情報を取得し、folders.mapでフォルダを１つずつ変換しています。

困ったのが.resource-meta.xmlファイルを準備する方法です。悩んだ結果、templateフォルダに雛形ファイルを置き、それをコピーする方法で対応してみました。(ファイル名以外は内容は同じだと思うので...)

もしかするとまだ見落としている問題があるかもしれませんが、ひとまずやりたかったことは実現できたと思います。次はこれを使ったVisualforceページ開発の流れをまとめてみようかなと思います。