npmのバージョン2.7.5でmean-cliを使って以下のコマンドを実行した。
|
1 2 3 4 5 6 |
sudo npm install -g mean-cli mkdir -p ~/testdoc cd ~/testdoc mean init mean-test cd mean-test npm install |
ここで、こちらのサイトのような現象になった。
結果、npmのバージョン2.7.4と2.7.5のバグ？でうまくいかないらしい。
僕の環境では、バージョン2.7.3を入れたらエラーなく実行出来るようになった。
ちなみにもう１台のMacにはnpmバージョン2.10.1が入っていたのでそちらでも実行してみたが、エラーなく実行できた。
MacでMEANスタック環境を作っている時とかにbowerを使うことがあった場合、permissionエラーが出ることがある。
具体的には、~/.config/configstore/bower-github.ymlにアクセス出来ない的な。
これは、このファイルにログインしているユーザのアクセス権が無いことが原因だが、だからといって頭にsudoをつけて実行してみても、今度はsudo付きでは実行出来ないようなエラーが返ってきてしまう。
この場合、以下のコマンドでファイル（というかそのディレクトリ）の所有者を変更することで解消することが出来た。
|
1 |
sudo chown -R (username):staff ~/.config/configstore |
もちろん、(username)の部分にはログインしているユーザ名を入れる。
ユーザ名がtaroなら、taro:staffのような感じにする。
・Mac：OS X Yosemite Ver10.10.3
・Homebrew：Ver0.9.5
・Node.js：Ver0.12.4
・npm：Ver2.10.1
・bower：Ver1.4.1
・gulp：Ver3.9.0
Homebrewを使ってインストールする。
|
1 |
brew install mongodb |
インストール確認
|
1 2 |
mongodb --version MongoDB shell version: 3.0.3 |
Mac起動時にMongoDBが自動起動されるように以下を実行
|
1 |
ln -sfv /usr/local/Cellar/mongodb/3.0.3/homebrew.mxcl.mongodb.plist ~/Library/LaunchAgents |
MongoDBを起動
|
1 |
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist |
npmを使ってインストール
|
1 |
sudo npm install mean-cli |
~/testdoc/に移動（無ければ作成する）
|
1 |
cd ~/testdoc |
~/.npmのパーミッションの変更（初回のみ）
|
1 |
sudo chown -R `whoami` ~/.npm |
プロジェクトの作成（プロジェクト名は、mean-testとする）
|
1 |
mean init mean-test |
このコマンド実行後にいくつかの質問事項があるので、任意に選択する
（基本的にはほぼデフォルト通り。ユーザIDやパスワードは好きな値を入力する）
カレントディレクトリの移動
|
1 |
cd mean-test |
以下のコマンド２つを実行
|
1 2 |
npm install bower install |
Webサービスの実行
|
1 |
gulp |
gulpを実行したら、port3000で実行されると思うので、ブラウザからhttp://localhost:3000/に接続する
そうすると、MEANのホーム画面？が出るので、左上のLoginからログインしていろいろ試してみると良いと思う
ちなみにここまでやって、http://localhost:3000/に接続したときに真っ白の画面になることがあったのだが、一度フォルダ毎削除してもう一度やり直すとうまく表示できた。
では
最近、世間的にはちょっと遅いのかもしれませんが、Node.js関連のことを勉強しようと思いまして、何やら調べているといろいろ出てくる出てくる・・・
ちょっとウキウキ（？）しながら、手始めにタスク管理プログラムgulpというのを試してみようと思います。
・Macのユーザディレクトリ（いわゆる~/のディレクトリ）にtestdoc/gulptestディレクトリを作成
・Node.jsをインストール（Node.jsのサイト に行く ⇢ Installボタンを押す ⇢ ダウンロードしたpkgファイルを実行 ⇢ インストール）
・コマンドライン環境は、iTerm2を使用
コマンドラインから、「node -v」コマンドを実行して、バージョンが返ってくることを確認。
npmは、Node.jsのパッケージを管理するためのプログラムで、Node.jsをインストールしたらこれもインストールされているはず。
コマンドラインから、これも「npm -v」を実行して、バージョンが返ってくることを確認。
コマンドラインで、以下を実行。
|
1 |
cd testdoc/gulptest |
コマンドラインで、「npm init」を実行
いろいろ質問されると思うので、とりあえず下のような感じで入力。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
% npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (gulptest) version: (1.0.0) 0.0.0 description: gulp練習用 entry point: (index.js) test command: git repository: keywords: gulp author: koutaro license: (ISC) About to write to /Users/tokushima/testdoc/gulptest/package.json: { "name": "gulptest", "version": "0.0.0", "description": "gulp練習用", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "gulp" ], "author": "koutaro", "license": "ISC" } Is this ok? (yes) |
コマンドラインから、以下を実行。
|
1 |
sudo npm install -g gulp |
パスワードを聞いてくるので、Macにログインしている時のパスワードを入力する。
ちなみに「-g」は、Macのどのディレクトリにいても使えるようにするためのオプション（だったはず）
これで、このディレクトリにpackage.jsonというファイルが出来ているはず。
コマンドラインから、以下を実施
|
1 |
sudo npm install —save-dev gulp |
これで、package.sonに以下の部分が追加されている（はず）
|
1 2 3 |
"devDependencies": { "gulp": "^3.9.0", } |
今のディレクトリ（testdoc/gulptest）にgulpfile.jsを作成する
作成したら、以下の内容を入力する
|
1 |
var gulp = require(“gulp”); |
上記だけなら、gulpを入れたとはいえ動かせないので、とりあえずjavascriptを圧縮するパッケージを入れて動作させる設定をする
まずは、コマンドラインから、以下のコマンドを実行
|
1 |
sudo npm install —save-dev gulp-uglify |
index.jsファイルの内容は、とりあえず以下のように入力する
|
1 2 3 4 5 |
(function() { window.addEventListener('load', function(){ alert('window load event'); }); })(); |
gulp-uglifyを動かすために、gulpfile.jsに以下を追加する
|
1 2 3 4 5 6 7 |
var uglify = require("gulp-uglify"); gulp.task("js", function() { gulp.src(["js/**/*.js", "!js/min/**/*.js"]) .pipe(uglify()) .pipe(gulp.dest("./js/min")); }); |
コマンドラインで以下を実行する。
|
1 |
gulp js |
これで、js/minディレクトリの下に圧縮されたindex.jsが出来る。
僕がMacで使っているコマンドライン実行環境についての備忘録として・・・
使っているソフト：iTerm2
Mac標準のターミナルは僕的には使いにくかったので、これを使っています。
・iTerm2のインストール
１．iTerm2のサイト からダウンロードする。（Downloadボタンを押す）
２．ダウンロードしたzipファイルを解凍し、iTerm.appをアプリケーションに移動する。
・iTerm2の設定
特に細かい設定はしていないが、起動時のウィンドウサイズについては使っているMacの画面サイズに合わせて、それなりの大きさ（縦幅は画面の半分くらい、横幅は画面よりちょっと小さいくらい）になるように調整している。
調整方法は、以下のとおり
１．「iTermのメニュー」 ⇢ 「Preferences」を選択
２．「Profiles」 ⇢ 「Window」とクリックし、「Settings for New Windows」の数字を調整する。
何回か起動し直しながら、大きさを調整する。
（前提）
次に「追加」ボタンを押す。そうするとアドレスのところに１行追加されるので、「アドレス」「ネットマスク」ゲートウェイ」を入力する。
