こんにちは。
今日から異様に寒くなりました。
でも暖房はまだつけない！負けない！
どうもハチマキです。
はじめに
CoffeeScriptをコンパイルする作業が必要だったため、コンパイルを自動化するgulpを導入しました。
今回導入にあたり、いくつかエラーが発生し、ハマった点がありましたのでその解決方法を書いていきたいと思います。
導入までに3つほどエラーが発生しましたが、無事完了しました。
では、早速いきましょう〜！！（〜はチルダと言います）
本日の概要 : Gulp導入時に発生したエラーを解決していく
まずはgulp（ガルプ）とは？
Node.jsをベースとしたビルドシステムヘルパーです。
gulpを使うことで、様々な作業を自動化することができます。
※例えば、Webサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、作業の効率化に使われています。
なぜ自動化が必要なのか？
良くSassやSylusなどのCSSプリプロセッサを使うときや、CoffeeScriptやTypeScriptといったAltJSを使うときなど、コンパイルという作業が毎回必要になります。
コンパイルだけならば各種のコンパイラに付いているwatch機能を利用して変更を監視することはできます。が、コンパイル後に「圧縮・結合して、ブラウザの自動更新も行いたい」と思った場合はどうでしょう。
これらの作業を毎回手動で実行するのは手間がかかるため、これらの作業をgulpのタスクにし、自動化することで作業を効率的に進めることができます。
開発環境の準備
開発環境の準備の前にgulpを導入する上で、注意すべき点を先に述べたいと思います。
注意すべき点は、Node.jsとgulpのバージョンの組み合わせです。
最新のNode.jsをインストールする場合、gulpのバージョンが4以上でないと動きません。
※今回は、nodeのバージョンv10.22.1に合わせてgulpの導入するために、gulpのバージョンを下げて進めていきます。
・パターン例 $ node -v v10.22.1 $ gulp -v CLI version: 2.3.0 Local version: 3.9.1 ーーーーーーーーーーーーー $ node -v v14.13.1 $ gulp -v CLI version: 2.3.0 Local version: 4.0.2
手順① Node.jsをインストール
$ brew install node@10 ※今回は10系をインストールしていきます $ node -v -bash: node: command not found
まずここで、一つ目のエラーが発生しました。
ーbash: node: command not foundのエラーを解決するためには、.bash_profileにパスを追加することで解消が出来ます。（エラーがでなければ手順②へ）
下記コマンドを実行していきます。
$ echo 'export PATH="/usr/local/opt/node@10/bin:$PATH"' >> /Users/ユーザ名/.bash_profile #>>はファイル末尾に追記されます $ source /Users/ユーザ名/.bash_profile #シェルの設定ファイルを反映させる $ node -v #再度バージョンを確認すると、無事に確認出来ました v10.22.1
手順② npmによるインストール
$ npm install [ audited 687 packages in 4.809s 25 packages are looking for funding run `npm fund` for details found 30 vulnerabilities (9 low, 10 moderate, 11 high) run `npm audit fix` to fix them, or `npm audit` for details $ npm -v 6.14.8
npmはインストール出来ましたが、ここでもエラーが発生しました。
手順③で、2つ目のエラーを解決していきます。
手順③ gulpのインストール
上記エラーを解決するためには、gulpをインストールする必要があります。
下記2つのコマンドを実行していきましょう。
$ npm install -g gulp #gulpをグローバルインストール $ npm install --save-dev gulp #gulpをローカルインストール $ gulp -v CLI version: 2.3.0 Local version: 4.0.2 $ gulp Requiring external module coffee-script/register [AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Task function must be specified
無事にgulpのインストールが完了しましたが、gulpコマンドを実行すると3つ目のエラーが新たに発生しました。
これを解決するためには、冒頭にも記載したバージョンの組み合わせを整える必要があります。
ですので、バージョンを指定し直すことで解決にたどり着けます。
$ sudo npm install --save-dev gulp@3.9.1 $ gulp -v CLI version: 2.3.0 Local version: 3.9.1 $ node -v v10.22.1 $ gulp [15:29:22] Requiring external module coffee-script/register [15:29:22] Using gulpfile ~/アプリ名/gulpfile.coffee [15:29:22] Starting 'clean'... [15:29:22] Starting 'coffee-lint'... [15:29:22] Starting 'compile-coffee'... [15:29:22] Starting 'copy-pure-js'... [15:29:22] Starting 'watch'... [15:29:22] Finished 'watch' after 34 ms [15:29:22] Finished 'copy-pure-js' after 79 ms omg/client/ConvertRecord.coffee ✖ line 9 Line exceeds maximum allowed length Length is 100, max is 80 ✖ line 46 Line exceeds maximum allowed length Length is 81, max is 80 ✖ line 51 Line contains a trailing semicolon ✖ line 56 Line contains a trailing semicolon ✖ 4 errors . . .
これで無事gulpが正常に動作し、導入が完了です！
お疲れ様でした。
