かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その5 )( Bootstrap, AdminLTE, Font Awesome, Ionicons のインストール )

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その4 )( nodist + Node.js のインストール ) の続きです。

  • 今回の手順で確認できるのは以下の内容です。
    • npm を使用して Bootstrap, AdminLTE, Font Awesome, Ionicons をインストールします。
    • インストール後 src/main/resources/static へ必要なファイルをコピーする npm-scripts も作成します。

参照したサイト・書籍

  1. Purpose of installing bootstrap through npm?
    https://stackoverflow.com/questions/26773767/purpose-of-installing-bootstrap-through-npm

  2. npm でパッケージのバージョン一覧を確認したりバージョンを指定してインストールしたりする方法
    http://phiary.me/npm-package-version-info-install/

  3. npm scriptsを使おう
    http://qiita.com/liply/items/cccc6a7b703c1d3ab04f

  4. npm-scripts で使える便利モジュールたち
    http://qiita.com/mysticatea/items/12bb6579b9155fd74586

  5. cpx と rimraf を試す
    http://akabeko.me/blog/2015/09/cpx-rimraf/

  6. cpx
    https://www.npmjs.com/package/cpx

  7. rimraf
    https://www.npmjs.com/package/rimraf

  8. npm-run-all
    https://www.npmjs.com/package/npm-run-all

  9. npm runコマンドを実行したら警告が出るようになった
    http://qiita.com/isamusuzuki/items/738a2736a746b67bd977

目次

  1. package.json を生成する
  2. Bootstrap をインストールする
  3. AdminLTE をインストールする
  4. Font Awesome をインストールする
  5. Ionicons をインストールする
  6. install 後に node_modules → src/main/resources/static へファイルをコピーする npm-scripts を作成する
  7. AdminLTE の starter.html で確認する
  8. .gitignore を変更する
  9. 最後に

手順

package.json を生成する

  1. npm init -y コマンドを実行して package.json を生成します。

    f:id:ksby:20170722145004p:plain

    今は生成されたままとし、特に変更はしません。

Bootstrap をインストールする

  1. npm info bootstrap versions コマンドを実行してインストール可能な Bootstrap のバージョン一覧を表示します。

    f:id:ksby:20170722150304p:plain

  2. npm install --save bootstrap コマンドを実行して Bootstrap をインストールします。bootstrap@3.3.7 と表示されており、3.3.7 がインストールされました。

    f:id:ksby:20170722150624p:plain

  3. インストール先の node_modules/bootstrap の下を見ると以下のディレクトリ構成になっていました。単に使用したいのであれば dist ディレクトリの下のファイルを使えば良さそうです。

    f:id:ksby:20170722151144p:plain

AdminLTE をインストールする

  1. Google で “npm AdminLTE” で検索すると https://www.npmjs.com/package/admin-lte のページがヒットしました。npm でインストールする時のパッケージ名は admin-lte のようです。

    npm install --save admin-lte コマンドを実行して Bootstrap をインストールします。

    f:id:ksby:20170722152034p:plain

  2. インストール先の node_modules/admin-lte の下を見ると以下のディレクトリ構成になっていました。こちらも単に使用したいのであれば dist ディレクトリの下のファイルを使えば良さそうです。

    f:id:ksby:20170722152414p:plain

    jQuery も node_modules/admin-lte/plugins/jQuery の下に jquery-2.2.3.min.js があります。今回はこのファイルを使用します。

    f:id:ksby:20170722152615p:plain

Font Awesome をインストールする

  1. “npm Font Awesome” で検索すると https://www.npmjs.com/package/font-awesome がヒットしました。

    npm install --save font-awesome コマンドを実行して Font Awesome をインストールします。

    f:id:ksby:20170722174852p:plain

  2. インストール先の node_modules/font-awesome の下を見ると以下のディレクトリ構成になっていました。単に使用したいのであれば css, fonts ディレクトリの下のファイルを使えば良さそうです。

    f:id:ksby:20170722175203p:plain

Ionicons をインストールする

  1. “npm Ionicons” で検索すると https://www.npmjs.com/package/ionicons がヒットしました。

    npm install --save ionicons コマンドを実行して Ionicons をインストールします。

    f:id:ksby:20170722175714p:plain

  2. インストール先の node_modules/font-awesome の下を見ると以下のディレクトリ構成になっていました。単に使用したいのであれば css, fonts ディレクトリの下のファイルを使えば良さそうです(dist に scss 用のファイルとかも入っていて分かりづらいです)。

    f:id:ksby:20170722180247p:plain

install 後に node_modules → src/main/resources/static へファイルをコピーする npm-scripts を作成する

以下のコマンドを実行して npm-scripts を作成する上で便利なパッケージをインストールします。

  • npm install --save-dev cpx
  • npm install --save-dev rimraf
  • npm install --save-dev npm-run-all

package.json の scripts にコピー用の script を定義します。パッケージのファイルは src/main/resources/static/vendor/<パッケージ名>/ の下にコピーします。

  "scripts": {
    ..........
    "postinstall": "run-s clean:static-dir copy:all",
    "clean:static-dir": "rimraf src/main/resources/static/*",
    "copy:all": "run-p copy:bootstrap copy:admin-lte copy:font-awesome copy:ionicons",
    "copy:bootstrap": "cpx node_modules/bootstrap/dist/**/* src/main/resources/static/vendor/bootstrap",
    "copy:admin-lte": "cpx node_modules/admin-lte/dist/**/* src/main/resources/static/vendor/admin-lte",
    "copy:font-awesome": "cpx node_modules/font-awesome/{css,fonts}/**/* src/main/resources/static/vendor/font-awesome",
    "copy:ionicons": "cpx node_modules/ionicons/dist/{css,fonts}/**/* src/main/resources/static/vendor/ionicons"
  },
  • postinstall を追加し、npm install コマンドが実行された後にファイルのコピーを行う処理を記述します。run-s コマンドで clean:static-dir → copy:all の順に script を実行します。
  • clean:static-dir は src/main/resources/static の下のディレクトリ、ファイルを削除します。static ディレクトリ自体は削除しません。
  • copy:all は node_modules の下から必要なファイルを src/main/resources/static の下にコピーします。以下の4つの script を run-p コマンドで並列実行します。
    • copy:bootstrap は node_modules/bootstrap パッケージの下のファイルをコピーします。
    • copy:admin-lte は node_modules/admin-lte パッケージの下のファイルをコピーします。
    • copy:font-awesome は node_modules/font-awesome パッケージの下のファイルをコピーします。
    • copy:ionicons は node_modules/ionicons パッケージの下のファイルをコピーします。

npm install コマンドを実行してみます。

f:id:ksby:20170723004623p:plain f:id:ksby:20170723004808p:plain

The node binary used for scripts is C:\Nodist\bin\node.exe but npm is using C:\Nodist\v-x64\6.11.1\node.exe itself. Use the–scripts-prepend-node-pathoption to include the path for the node binary npm was executed with. というメッセージが大量に出力されました(というより npm install コマンドでパッケージをインストールしている時から出ていて WARN だったので気にしていなかっただけでしたが)。さすがに量が多いので出力されないようにする方法があるか確認します。

Web で調べたところ npm runコマンドを実行したら警告が出るようになった に解決方法が記載されていました。npm config set scripts-prepend-node-path true コマンドを実行します。

再度 npm install コマンドを実行します。

f:id:ksby:20170723005544p:plain f:id:ksby:20170723005653p:plain

まだ npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): というメッセージが出ます。

Web で調べたところ fsevents は Mac でしか使用できないパッケージのためメッセージが出力されていますが、WARN なので気にしなければよいようです。

src/main/resources/static の下を見ると以下の画像のようにディレクトリが作成されていました。

f:id:ksby:20170723011220p:plain

AdminLTE の starter.html で確認する

node_modules/admin-lte の下に starter.html がありますので、それを src/main/resources/static の下にコピーした後、以下の点を変更します。

  • <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"><link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"><link rel="stylesheet" href="/vendor/ionicons/css/ionicons.min.css">
  • <link rel="stylesheet" href="dist/css/AdminLTE.min.css"><link rel="stylesheet" href="/vendor/admin-lte/css/AdminLTE.min.css">
  • <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css"><link rel="stylesheet" href="/vendor/admin-lte/css/skins/skin-blue.min.css">
  • 以下の2行はコメントアウトします。
    • <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    • <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  • body タグ内の <img src="dist/img/...<img src="/vendor/admin-lte/img/...

head タグ内は以下のようになります。

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Starter</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/vendor/ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/vendor/admin-lte/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
  <link rel="stylesheet" href="/vendor/admin-lte/css/skins/skin-blue.min.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--&lt;!&ndash;[if lt IE 9]>-->
  <!--<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
  <!--<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
  <!--<![endif]&ndash;&gt;-->
</head>

bootRun タスクを実行して Tomcat を起動した後、http://localhost:8080/starter.html にアクセスすると画面が表示されました。

f:id:ksby:20170723013450p:plain

Tomcat を停止します。

.gitignore を変更する

  1. commit する前に .gitignore を以下の方針で変更します。

    • node_modules は commit の対象にしません。
    • src/main/resources/static も commit の対象にしません。
    • npm 実行時にエラーが出ると出力される npm-debug.log も commit の対象にしません。

    .gitignore を リンク先の内容 に変更します。

    commit すると変更した .gitignore と、生成した package.json だけでした。npm install コマンドを実行すれば必要なファイルがインストール + コピーされます。

最後に

npm + npm-scripts が便利ですね。最初 Node.js + npm 関連を調べた時は最近の流行りは grunt, gulp ではなく webpack になったというような記事を見ていたので、npm でインストールした Bootstrap の css ファイル等を src/main/resources/static の下にコピーしたい場合にも webpack でやるのかな、と思って試行錯誤していたのですが(ファイルをコピーするための copy-webpack-plugin は見つけました)、単なるコピーは npm-scripts の方が楽でした。

現時点での感想として、

  • npm-scripts と webpack を必要に応じて使い分けるのが良さそう。
  • コピーするだけのような簡単な処理だったりコマンド実行するような場合には npm-scripts で。
  • 自分で js ファイルを実装して、実行用に1つにまとめるような場合には webpack で。
  • SPA で js ファイル以外に css や html のファイルも1つにまとめる場合も webpack で。
  • Gulpで始めるwebpack 3入門 という記事も見かけました。どうも大規模開発になったら webpack に gulp を組み合わせるといいらしいですが、今の自分ではその境地には至れず。。。 npm-scripts + webpack で進めて、必要性を感じたら gulp を使う流れかな? 今は無理に手を出さないことにします。

今回の作業で生成・変更した package.json の最終版を リンク先 に記載しておきます。

ソースコード

.gitignore

# built application files
*.apk
*.ap_

# files for the dex VM
*.dex

# Java class files
*.class

# generated files
**/bin/
**/gen/

# Local configuration file (sdk path, etc)
local.properties

# Eclipse project files
.classpath
.project

# Proguard folder generated by Eclipse
**/proguard/

# Intellij project files
*.iml
*.ipr
*.iws
**/.idea/
**/out/
**/src/main/resources/static

#Gradle
.gradletasknamecache
**/.gradle/
**/build/
**/bin/

#Node.js
**/node_modules/
npm-debug.log
  • **/src/main/resources/static を追加します。
  • #Node.js から下の行を追加します。

package.json

{
  "name": "boot-npm-geb-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "run-s clean:static-dir copy:all",
    "clean:static-dir": "rimraf src/main/resources/static/*",
    "copy:all": "run-p copy:bootstrap copy:admin-lte copy:font-awesome copy:ionicons",
    "copy:bootstrap": "cpx node_modules/bootstrap/dist/**/* src/main/resources/static/vendor/bootstrap",
    "copy:admin-lte": "cpx node_modules/admin-lte/dist/**/* src/main/resources/static/vendor/admin-lte",
    "copy:font-awesome": "cpx node_modules/font-awesome/{css,fonts}/**/* src/main/resources/static/vendor/font-awesome",
    "copy:ionicons": "cpx node_modules/ionicons/dist/{css,fonts}/**/* src/main/resources/static/vendor/ionicons"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "admin-lte": "^2.3.11",
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "ionicons": "^3.0.0"
  },
  "devDependencies": {
    "cpx": "^1.5.0",
    "npm-run-all": "^4.0.2",
    "rimraf": "^2.6.1"
  }
}

履歴

2017/07/23
初版発行。