GoogleAppsScript

Google Apps Scriptアプリローカル開発用Gulpテンプレート

More than 3 years have passed since last update.

GAS(Google Apps Script)アプリをローカルで開発するためのGulpテンプレートです。

scriptタグ(JS)、linkタグ(CSS)を一つのHTMLに結合し、

gas-managerを使用してアップロードまで自動化します。

このテンプレートは以前投稿した

タスクランナー空テンプレート(Grunt・Gulp)をベースにしています。


テンプレート

https://github.com/nowri/gulp-gas-nxw


利用手順


  1. 上記テンプレートをダウンロード

  2. npm install


  3. Google API OAuth2.0のアクセストークン&リフレッシュトークン取得手順メモを参考に




  4. Google DriveよりGoogle Apps Scriptを作成

    ※スプレッドシートから作成するスクリプトは使えません。ドライブ上で作成する必要があります

    参考:Google Apps Scriptの開発手法まとめ

  5. 上記スクリプトのfileIDを取得します。

    fileIDは上記にアクセスしたURLの

    /d/[FILE ID]/edit?

    [FILE ID]部分です。

  6. 3、5で取得した


    • fileID

    • client_id

    • client_secret

    • refresh_token

      をテンプレートgulpfile.js43〜46行に記述



  7. 4で作成したGoogle Apps Scriptに必要なファイルを追加


  8. _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タスクを実行