npmでanimate.cssをコンパイルする方法

Question

npmでanimate.cssをコンパイルするのに手間取っています。

Animate.cssの公式リファレンスを自分なりに読み進めた限りでは、

・npmからanimate.cssをインストール

・animate-config.jsonというファイルを作成、その中にjson形式で使用するアニメーションをtrue,使用しないものはfalseで記述する。

・npx gulpコマンドを打てば使用するアニメーションコードだけがコンパイルされる

とあります。
Animate.cssのgithubページ

しかし、animate-config.jsonファイルを作成し、試しに公式の「attention_seekers」をコピペしてnpx gulpを打ったところ、それらしきファイルができませんでした。

表示するページの中をデベロッパーツールで見てみても、animate.cssのコードはコンパイルされていませんでした。

上記の手順のどこかに不足があるのでしょうか？
ご教授よろしくお願いします。

**追記
以下、試したことと、それに対するターミナルの表示です。

①npx gulpコマンドを打った結果
gulpfile.jsに書かれていたdefaultタスクが起動。animate-config.jsonに関する処理は確認できず。

②gulpfile.jsを一旦削除してnpx gulp
No gulpfile found
と表示

③gulpfile.jsに以下のコードを記述してnpx gulp

let animated = require('animate.css');
"animated": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "headShake": true,
  "swing": true,
  "tada": false,
  "wobble": true,
  "jello":true
}

SyntaxError: Unexpected token :
と表示

Comments

[maisumakun]

npx gulpを実行して、どのようなメッセージが出ましたか？

[yoorwm]

勘で書くけど
> $ cd path/to/animate.css/
> $ npm install
この手順が抜けているのでは？

Answer 1

カスタムビルドの場合、最初にやるべき手順は「npmからのインストール」ではなく、「animate.cssのgit clone」なのではないでしょうか。

手順にcd path/to/animate.css/と書かれていますが、node_modulesの中に入って作業を行うことは通常ありません。

Comments

[marutto]

アドバイスありがとうございます！
仰る通りでした。

カスタムビルドを行うためにはanimate.cssライブラリ本体に入ってanimate-config.jsonを編集。

そしてプロジェクトとは別にnpm installを行った上でnpx gulp打ったらminify化されたanimate.cssがカスタムビルドできました！

私が勘違いしていたところとして、プロジェクトのgulpfile.jsと同階層でanimate.cssの設定するモノだったという点です。
リファレンスをちゃんと読めばお手数をかけずに済んだことですね。

申し訳ありませんでした。そして、ありがとうございました！