GAS(Google Apps Script)アプリをローカルで開発するためのGulpテンプレートです。
scriptタグ(JS)、linkタグ(CSS)を一つのHTMLに結合し、
gas-managerを使用してアップロードまで自動化します。
このテンプレートは以前投稿した
[タスクランナー空テンプレート(Grunt・Gulp)]
(http://qiita.com/nowri/items/98cbc66bde78d1ae19f1)をベースにしています。
テンプレート
利用手順
- 上記テンプレートをダウンロード
npm install- Google API OAuth2.0のアクセストークン&リフレッシュトークン取得手順メモを参考に
- client_id
- client_secret
- refresh_token
を取得。
ただし
[5、クエリパラメータを追加したURLにブラウザでアクセス]
は、以下のようにアクセスURLを変更
https://accounts.google.com/o/oauth2/auth?client_id=[4で取得したクライアントID]&redirect_uri=[4で設定したリダイレクトURI]&scope=https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.scripts&response_type=code&approval_prompt=force&access_type=offline
scopeにApps Scriptアクセス権限を追加する必要があるためです。
参考: Choose Auth Scopes | Drive REST API | Google Developers
-
Google DriveよりGoogle Apps Scriptを作成
※スプレッドシートから作成するスクリプトは使えません。ドライブ上で作成する必要があります
参考:Google Apps Scriptの開発手法まとめ - 上記スクリプトのfileIDを取得します。
fileIDは上記にアクセスしたURLの
/d/[FILE ID]/edit?
[FILE ID]部分です。 - 3、5で取得した
- fileID
- client_id
- client_secret
- refresh_token
をテンプレートgulpfile.js43〜46行に記述
- 4で作成したGoogle Apps Scriptに必要なファイルを追加
-
_syncgasディレクトリに7で追加したファイルと同名のファイルが作成されるように開発する
テンプレートのディレクトリ・タスクリスト
| ディレクトリ | 説明 |
|---|---|
| _syncgas | GAS同期用 |
| _release | 納品用 |
| deploy | 開発用 |
| libs | ライブラリ等置き場(ex. libs/js/jquery-1.11.3.min.js) |
| src | コンパイル前データ等置き場(ex. src/scss/style.scss) |
| タスク名 | 説明 |
|---|---|
common:before |
共通タスク。専用タスクの一番最初に実行させる |
deploy |
開発時専用タスク |
release |
納品時専用タスク |
gas-render |
releaseタスク実行後、_release ディレクトリのHTMLファイルをHTMLファイル内に記述されているscript・linkタグリンク先と共にGAS用にひとつにまとめ、_syncgasディレクトリに書き出し |
gas-upload |
_syncgasディレクトリ内のファイルをGoogle Apps Scriptにアップロード。_syncgasとGoogle Apps Scriptで同名のファイルが有る場合のみアップロードされそれ以外は無視される |
render-and-upload |
gas-render + gas-upload
|
watch:render-and-upload |
ファイルを監視し更新時render-and-uploadタスクを実行 |