Google公式GASのCLIツールclaspを試してみる

clasp

公式ページ

GASのCLIツールがGoogle公式のが出てたので使ってみる。

環境構築

---

まずは対象アカウントでこちらにアクセスし、
Google Apps Script APIをオンにする。

次にclaspをインストール

sh

$ npm i @google/clasp -g

claspでログイン

sh

$ clasp login

ブラウザが開クノで対象のアカウントでログイン
この時、~/.clasprc.jsonが作成される様子。

 実装

---

簡単なサンプル

1. Googleドライブ上でGASのテストプロジェクトを作成
2. 作成したプロジェクトをローカルにクローン
   • $ clasp clone [プロジェクトID]
   • プロジェクトIDはファイル→プロジェクトのプロパティで表示された以下赤枠の部分
   • 
   • クローンされるとappsscript.jsonと.clasp.jsonも作成される
3. ファイルを修正してアップロードしてみる。
   • $ clasp push で無事アップロードされていればOK

Webpackを導入しES6で書けるようにする

1. yarn initしてpackage.json作成
2. 以下パッケージ追加
   json

     "devDependencies": {
       "babel-core": "^6.26.0",
       "babel-loader": "^7.1.2",
       "babel-preset-es2015": "^6.24.1",
       "dotenv": "^5.0.0",
       "gas-webpack-plugin": "^0.2.1",
       "webpack": "^3.10.0"
     }
   

3. lib/entry.jsを以下の内容で作成
   js

   global.execute = function() {
     Logger.log('---- execute start ----');
     Logger.log('---- execute end ----');
   }
   

4. webpack.config.jsを以下の内容で作成
   js

   var path = require('path');
   var GasPlugin = require("gas-webpack-plugin");
   
   require('dotenv').config();
   
   module.exports = {
     context: __dirname + '/lib',
     entry: './entry.js',
     output: {
       path: __dirname + '/src',
       filename: 'main.js'
     },
     plugins: [
       new GasPlugin()
     ],
     module: {
       loaders: [
         {
           test: /\.js$/,
           loader: 'babel-loader',
           exclude: /(node_modules|bower_components)/,
           query: {
             presets: 'es2015'
           }
         }
       ]
     },
   };
   

5. ビルドしてみる npm run build
   • src/main.jsが作成されとけばOK
6. この時点でclasp pushしちゃうとnode_modules配下もあげようとするので
   以下のような .claspignoreを作る

   **/**
   !src/main.js
   !appsscript.json
   

7. またはルートディレクトリを変更してもOK .clasp,jsonを修正する

   {"scriptId":"x-x-x-x-x", "rootDir": "src"}