gulpでbowerのパッケージを自動挿入

gulp-injectを使う。

インストール(開発環境だけでいいので、–save-dev)

npm install --save-dev wiredep

1	npm install --save-dev wiredep

挿入されるhtmlを編集

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

パッケージの挿入先を指し示すためgulpfile.js編集

// bowerのスクリプトをHTMLに埋め込む
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;

  return gulp
    .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])
    .pipe(wiredep()) // wiredep bower dependencies
//    .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {
//      relative: true // no need for the './src/client' part
//    }))    
    .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html
})

// bowerのスクリプトをHTMLに埋め込む

gulp.task('wiredep', function() {

var wiredep = require('wiredep').stream;

return gulp

.src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])

.pipe(wiredep()) // wiredep bower dependencies

// .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {

// relative: true // no need for the './src/client' part

// }))

.pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html

})

取り敢えずテスト的にbower

$ bower init

1	$ bower init

リターン連続

$ bower install angular-translate --save

1	$ bower install angular-translate --save

でangular-translateをインストール

bower.jsonを確認

{
  "name": "mean",
  "description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.",
  "main": "",
  "authors": [
    "https://......."
  ],
  "license": "MIT",
  "homepage": "https://.......",
  "moduleType": [
    "node"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-translate": "^2.15.1"
  }
}

{

"name": "mean",

"description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.",

"main": "",

"authors": [

"https://......."

"license": "MIT",

"homepage": "https://.......",

"moduleType": [

"node"

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

"dependencies": {

"angular-translate": "^2.15.1"

}

dependenciesに挿入されて

bower_componentsフォルダにangular-translateがインストールされているのを確認。

では、gulp wiredepを実行。

gulp wiredep

1	gulp wiredep

↓はhead.html, foot.htmlに設置

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。

基本は相対パスで挿入されてしまう。

絶対パスがいいので↓のようにgulpfile.jsを変更

// bowerのスクリプトをHTMLに埋め込む
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;

  return gulp
    .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])
    .pipe(wiredep({
      ignorePath: '../../../../../../bower_components/',
      fileTypes: {
        html: {
          replace: {
            js: '<script src="/bower_components/{{filePath}}"></script>',
            css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />'
          }
        }
      }
    }))
// wiredep bower dependencies
//    .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {
//      relative: true // no need for the './src/client' part
//    }))    
    .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html
})

// bowerのスクリプトをHTMLに埋め込む

gulp.task('wiredep', function() {

var wiredep = require('wiredep').stream;

return gulp

.src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])

.pipe(wiredep({

ignorePath: '../../../../../../bower_components/',

fileTypes: {

html: {

replace: {

js: '<script src="/bower_components/{{filePath}}"></script>',

css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />'

}

}))

// wiredep bower dependencies

// .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {

// relative: true // no need for the './src/client' part

// }))

.pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html

})

AWSのCodeCommitはまだ未成熟

AWSの提供するサービスでCodeCommitと言うものがある、

これは要はGitHubみたいな動きをしてくれるのだが。。

ちょっと何かと惜しくて。

煩わしいです。

私の場合、AWSを使っているからといって使ってみたら

Macからgit cloneをしようとしても403エラーを回避できなくなってしまいました。

Macの403エラー回避方法がAWSオリジンのサイトに乗っているので、

その方法でKeyChainなどをいじったり、やってみたのだが、全く効果なし。

残念ですが、取り敢えず今のところCodeCommit自体を使うことが間違えという結論に至りました。

MEAN.IOをVagrantの共有フォルダで使うのに向いてない

今までの開発の方式にならってMEAN.IOを使うのにも

Vagrantの共有フォルダで開発をしていたが、結論から言うと

MEAN.IOを使うときはVagrantの共有フォルダは絶対に使わないほうがいい。

MEAN.IOの折角の便利な機能が全然使えなくなるし、

エラーが連発する。

工夫したら使えるようにする事もできなくはないが、

断然効率が悪い。

原因の多くは、Vagrantの共有フォルダでchmodができないことにある。

頑張って結局できなかったことがおおくて、悔しかったので記録しておく。

MACのMongoDBをスタート

brew services start mongodb

1	brew services start mongodb

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

結論から、

私の結論としてはnodemonを使うしかないかと。

ソース監視の方式に

nodemon

supervisor

node-dev

pm2

っといったアプリがありますが、すべてデフォルトではVagrantの共有フォルダに反応してくれません。

試行錯誤で結局全て試してしまったので、紹介する。

Nodemonをインストール

nodemonをインストール

npm install nodemon -g

1	npm install nodemon -g

後はnodeコマンドの代わりにnodemonを使うだけ

$ nodemon server.js

1	$ nodemon server.js

これがスタンダードなやり方。

VagrantのSynced folderを使っている場合には遅くするために”L”というオプションをつけて、

$ nodemon -L server.js

1	$ nodemon -L server.js

っとしなくてはいけないのですが、これが何故か上手くいかない。

何故かと言うと、↑のコマンドではファイルの更新を監視する対象(watch)

が「*.*」っとなっている、これでは同階層のファイルに対する変更しか監視しない。

監視したい対象は自分で指定する必要がある。

私の場合はこんな感じ。

nodemon -L server.js -watch packages/**/**/**/* packages/**/**/*

1	nodemon -L server.js -watch packages///*/ packages///*

これでOK。

Vagrantの共有フォルダで更新を監視したいだけなら、ココまでの部分でOK。

以降は蛇足。

Supervisorのインストール。

supervisorをインストールした。

$ npm install supervisor -g

1	$ npm install supervisor -g

無視するファイルとディレクトリの指定は -i

npmでインストールをかけたときに異常に再起動しないために

$ supervisor -i node_modules server.js

1	$ supervisor -i node_modules server.js

としてみたけど、結局VagrantのSynced Folderでは、これも結局使えない。

Node-devのインストール

$ npm install node-dev -g

1	$ npm install node-dev -g

PM2のインストール

$ npm install pm2 -g

こうです。

$ pm2 start server.js --watch

1	$ pm2 start server.js --watch

そうするとこう。

$ pm2 list
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────────┤
│ server   │ 0  │ fork │ 24446 │ online │ 1       │ 13s    │ 0%  │ 46.3 MB   │ enabled  │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────────┘

$ pm2 list

┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────────┐

│ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ watching │

├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────────┤

│ server │ 0 │ fork │ 24446 │ online │ 1 │ 13s │ 0% │ 46.3 MB │ enabled │

└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────────┘

ただひとつ残念なのが、今まで標準出力でリアルタイムに監視できてたログが見えなくなってしまうこと、標準出力がどこに言っているかというと

~/.pm2/logs/ ここ

ここに、

エラー：server-error-0.log

標準出力：server-out-0.log

っとわけて収納されている。

リアルタイム監視をしたいなら

$ tail -f ~/.pm2/logs/server-error-0.log

1	$ tail -f ~/.pm2/logs/server-error-0.log

っとすればリアルタイム監視ができます。

pm2での監視もういいよってなったらこう。

$ pm2 delete all

1	$ pm2 delete all

ただSynced Folderで使えない。

Gitで fatal: remote origin already exists. というメッセージが出る場合git remote rm origin

originを削除して再度プッシュすればOK。

git remote rm origin

1	git remote rm origin

AWSにNodeJSとMongoDBをセットアップ

AWSにMEANの環境をセットアップする

まずyumアップデート

$ sudo yum update

1	$ sudo yum update

環境構築に必要なパッケージを一気に取得

$ sudo yum install git gcc-c++ make openssl-devel

1	$ sudo yum install git gcc-c++ make openssl-devel

Nodejsのインストールのために

nvmをインストール

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

1 2	$ git clone git://github.com/creationix/nvm.git ~/.nvm $ source ~/.nvm/nvm.sh

で、Nodejsのいい感じのバージョンをインストール。

そのいい感じのバージョンをデフォルトとする。

$ nvm install 6.9.5
$ nvm alias default v6.9.5

1 2	$ nvm install 6.9.5 $ nvm alias default v6.9.5

次にMongoDBをインストールする

MongoDBインストール用のyumレポジトリを記述する

$ sudo vi /etc/yum.repos.d/mongodb.repo

1	$ sudo vi /etc/yum.repos.d/mongodb.repo

[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/
gpgcheck=0
enabled=1

[mongodb]

name=MongoDB Repository

baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/

gpgcheck=0

enabled=1

それでは、yumでMongoDBをインストール・スタート・起動のたびにスタートするように設定

sudo yum -y install mongodb-org
sudo service mongod start
sudo chkconfig mongod on

sudo yum -y install mongodb-org

sudo service mongod start

sudo chkconfig mongod on

取り敢えずここまでOK。

PhantomjsをCentOS6.5にインストール

sudo yum install epel-release
sudo rpm -ivh http://repo.okay.com.mx/centos/6/x86_64/release/okay-release-1-1.noarch.rpm
sudo yum install phantomjs.x86_64

sudo yum install epel-release

sudo rpm -ivh http://repo.okay.com.mx/centos/6/x86_64/release/okay-release-1-1.noarch.rpm

sudo yum install phantomjs.x86_64

Vagrant/CentOSにMEANの環境を一瞬で作成しようとしてできなかった。

Vagrant/CentOSにMEANの環境を一瞬で作成する

sudo yum -y groupinstall "Development Tools"
sudo yum -y update

1 2	sudo yum -y groupinstall "Development Tools" sudo yum -y update

git clone git://github.com/creationix/nvm.git ~/.nvm

1	git clone git://github.com/creationix/nvm.git ~/.nvm

source ~/.nvm/nvm.sh

1	source ~/.nvm/nvm.sh

nvm install 6.3.1

1	nvm install 6.3.1

sudo vim /etc/yum.repos.d/mongodb.repo

1	sudo vim /etc/yum.repos.d/mongodb.repo

[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/
gpgcheck=0
enabled=1

[mongodb]

name=MongoDB Repository

baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/

gpgcheck=0

enabled=1

sudo yum -y install mongodb-org
sudo service mongod start
sudo chkconfig mongod on

sudo yum -y install mongodb-org

sudo service mongod start

sudo chkconfig mongod on

sudo yum install libpng-devel

1	sudo yum install libpng-devel

npm install -g bower grunt-cli yo generator-mean

1	npm install -g bower grunt-cli yo generator-mean

yo mean

yo mean

$ grunt server --force
Loading "mocha-test.js" tasks...ERROR
>> Error: Cannot find module 'mocha'
Loading "mocha-test.js" tasks...ERROR
>> Error: Cannot find module 'mocha'
Warning: Task "server" not found. Used --force, continuing.

Done, but with warnings.

$ grunt server --force

Loading "mocha-test.js" tasks...ERROR

>> Error: Cannot find module 'mocha'

Loading "mocha-test.js" tasks...ERROR

>> Error: Cannot find module 'mocha'

Warning: Task "server" not found. Used --force, continuing.

Done, but with warnings.

npm install mocha
sudo yum install ruby
sudo yum install gcc g++ make automake autoconf curl-devel openssl-devel zlib-devel httpd-devel apr-devel apr-util-devel sqlite-devel
sudo yum install ruby-rdoc ruby-devel
sudo yum install rubygems
sudo gem update --system
sudo gem install compass
sudo gem install sass

npm install mocha

sudo yum install ruby

sudo yum install gcc g++ make automake autoconf curl-devel openssl-devel zlib-devel httpd-devel apr-devel apr-util-devel sqlite-devel

sudo yum install ruby-rdoc ruby-devel

sudo yum install rubygems

sudo gem update --system

sudo gem install compass

sudo gem install sass

Rubyが最新版でないことが問題。

su
cd ~
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
mkdir ~/.rbenv/plugins
cd ~/.rbenv/plugins/
git clone git://github.com/sstephenson/ruby-build.git

cd ~

git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

mkdir ~/.rbenv/plugins

cd ~/.rbenv/plugins/

git clone git://github.com/sstephenson/ruby-build.git

/etc/profileを編集

一番下に↓の行を追加

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

一番下に↓の行を追加

export PATH="$HOME/.rbenv/bin:$PATH"

eval "$(rbenv init -)"

rbenvを実行するときに必要なモジュールをインストール

sudo yum install gcc make openssl-devel libffi-devel
sudo yum install -y readline-devel

1 2	sudo yum install gcc make openssl-devel libffi-devel sudo yum install -y readline-devel

exec $SHELL -l

1	exec $SHELL -l

rubyの2.3.3をインストール

rbenv install 2.3.3
rbenv global 2.3.3
rbenv local 2.3.3
rbenv rehash

rbenv install 2.3.3

rbenv global 2.3.3

rbenv local 2.3.3

rbenv rehash

MongoDBを3.4にアップグレード

MongoDB3.4のyumレポジトリを追加

sudo vi /etc/yum.repos.d/mongodb-org-3.4.repo

1	sudo vi /etc/yum.repos.d/mongodb-org-3.4.repo

[mongodb-org-3.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

[mongodb-org-3.4]

name=MongoDB Repository

baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/

gpgcheck=1

enabled=1

gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

もともとあるMongoのレポジトリを修正

sudo vi /etc/yum.repos.d/mongodb.repo

1	sudo vi /etc/yum.repos.d/mongodb.repo

[mongodb]
name=MongoDB Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/
gpgcheck=0
enabled=0 <- 0に変更

[mongodb]

name=MongoDB Repository

baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/

gpgcheck=0

enabled=0 <- 0に変更

MongoDBのアップグレード

sudo yum clean all; sudo yum check-update
sudo yum update

1 2	sudo yum clean all; sudo yum check-update sudo yum update

・・・・・・・・

どう頑張ってもうまくいかない。。ので、諦めた。

一応、今後のために覚え書きとして記事にしておく。

・・・・・・・・

Vagrantをリロードしたらnodeもnpmもなくなっていた。。

幸いnvmを入れていたので、nvmですぐにインストールし直そうと思ったら。

nvmもないし、

source ~/.nvm/nvm.sh

1	source ~/.nvm/nvm.sh

っと、そうしたらnodeもnpmも回復。何故だかわからないけど。

まぁよし。

[2017/2/17追記]

イチイチログインのたびに上を実行するのも面倒なので、

~/.bashrcに以下のコードを追加。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

1 2	export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

M	T	W	T	F	S	S
« Nov
						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

HARD WORKER

カンボジア・プノンペンのフリーWEBプログラマー

Category: インターネット環境

gulpでbowerのパッケージを自動挿入

AWSのCodeCommitはまだ未成熟

MEAN.IOをVagrantの共有フォルダで使うのに向いてない

MACのMongoDBをスタート

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

Nodemonをインストール

Supervisorのインストール。

Node-devのインストール

PM2のインストール

Gitで fatal: remote origin already exists. というメッセージが出る場合git remote rm origin

AWSにNodeJSとMongoDBをセットアップ

PhantomjsをCentOS6.5にインストール

Vagrant/CentOSにMEANの環境を一瞬で作成しようとしてできなかった。

Vagrantをリロードしたらnodeもnpmもなくなっていた。。