git でローカル環境外で管理したくないファイルを指定する
普通に作った .gitignore はリポジトリ内で共有されてしまいます。
自分専用の環境設定ファイルなど、ローカル環境では使いたいけど、 リポジトリ全体では共有したくないものなどは .git/info/exclude に記述することで、管理から除外されます。
ただし、 sourcetree でクローンしたリポジトリなどではそもそも .git/info が作られないようです。
そんなときは普通に作っちゃえばオールオッケーです。
$ cd .git;mkdir info && cd info;touch exclude
あとはお好きなエディタで .git/info/exclude を .gitignore と同じように記述するだけ。
また、いちいち全部のリポジトリで記述するのはめんどくさいようなものであれば、 config をいじって設定できます。
$ git config --global core.excludesfile $HOME/.gitignore
この $HOME/.gitignore 内にローカル環境全体で無視したいファイルを記述すれば、どのリポジトリでも無視されます。
config ファイルを直接いじる場合はこんなかんじで
[core] excludesfile = /Users/hoge/.gitignore
vagrant に php 5.5 をインストール
以前の記事の通り、
$ sudo yum -y install php
と、 yum で 引っ張ってくると php 5.3系がインストールされてしまいますね。
これを参考にして5.5系をインストールしてみようとしたところ、どうもうまくいかない。
$ php --version
するとちゃんと5.5系が入っていることが確認できるのですが、例えば phpinfo.php が動作せずダウンロードされてしまう。
5.3系が入っていたときにはそんなことはなかったので、 httpd.conf などの設定を再度確認。すると、
LoadModule php5_module modules/libphp5.so
がなかったのでこれを書き足した!
そこで、httpd 再起動したら libphp5.so がありません!と怒られて httpd 起動しなかった…。
modules/の中身確認したけど やっぱり libphp5.so ない。
libphp5.so どうやったらできるのか〜と思って早速ggってみたら これがトップにヒットしたけどよくわからんぞ。
あとでこれも試す…
時間かかってしまったので結局 5.3 系入れなおしてとりあえずやれる作業はやっておく…
FUCK facebook ogp
browserify で javascript plug-in 使いたいときは browserify-shim を使え
前に書いた browserify の記事、これで $ は使えるようになるんですが、 plug-in を使おうとするとこのままだとできない。
そこで必要になるのが "browserify-shim" というもので、こいつを npm install したのち、 package.json に以下を追加。
{ ~略~ "browserify": { "transform": [ "browserify-shim" ] }, "browser": { "jquery": "./node_modules/jquery/dist/jquery.js", ~略~ }, "devDependencies": { "browserify": "^11.0.1", ~略~ } }
app.js は以下のような require で大丈夫になる。
require('jquery'); ~scripts~
参考記事qiita.com
gulp-ruby-sass で複数の scss を同時にコンパイルする
gulp-ruby-sass は src 部分に配列とかグローバル(*)を使うことが出来ないので、異なる scss ファイルを出力したい場合は複数のタスクを作るしかないと思っていたが、
以下のような方法で source をわけてあげることで複数の scss をコンパイル出来る。
//sources var sassSrc = { sass: '_src/sass/', scss: '_src/sass/**/*.scss' } //task gulp.task('sass', function() { return $.rubySass(['_src/sass/styles.scss', '_src/sass/styles2.scss'],{style: 'expanded'}) .pipe(gulp.dest('css/')); }); //watch gulp.task('watch',function() { gulp.watch(sassSrc.scss,['sass']); });
ありがとう、ありがとう
gulp で browserify
ちょっと前から話題の browserify を導入してみました。
browserify とは?
javascript で require ができるようになる。
jquery だとか、その他いろいろなライブラリを使っていると、その依存関係を考慮して html 順番に読み込ませたり、
あるいは順番に concat したりしてたけど、 require できたらあら楽ちん!ということらしい。(間違ってたらすいません)
私の場合は、パッケージ管理の目的が強いです。
今まで bower でそのあたりの外部ライブラリを管理していたのですが、gulp 使用目的で npm で package.json とかいうファイルを作って、さらに bower.json とかいうのも出てきて2個もいるのか、と思っていたところ。 全部 npm でできるならそのほうがいいよねと思い導入してみました。
まずはグローバルにインストールして、コマンドラインから使ってみる
$ npm install -g browserify
のちに、作業ディレクトリに移動しローカルにも インストールしましょう。
$ npm install --save-dev browserify
例えば、作業ディレクトリに以下のような中身の app.js があって、jquery に依存しているとしましょう。(※サンプルコードは適当です)
app.js
$('#hoge').hide();
ここでは、jquery を require したいので、以下のようにしましょう。
app.js
var $ = require('jquery'); $('#hoge').hide();
ここで、jquery どこででてくんのよ、という問題がありますので、npm で jquery をローカルにインストールした上で、
$ npm install --save-dev jquery
package.json に "browser" を以下のように書き足しましょう
{ ~略~ "browser": { "jquery": "./node_modules/jquery/dist/jquery.js" }, "devDependencies": { "browserify": "^11.0.1", ~略~ } }
そしてコマンドでこうだ!
$ browserify app.js > main.js
すると、 作業ディレクトリ上に main.js という、 jquery と一緒になった app.js が得られます。簡単!
gulp で browserify したい
本題です。
どうせ開発で使うんだったら gulp で watch して自動でやってほしいですし。
開発例は先ほどと同じ前提です。
問題は gulpfile.js をどう書くかということで。
まあ普通に src して browserify ってやって gulp.dest でいけんのかなと思ってたら引っかかった。
最初に結果どうなったかを書きます。
var gulp = require('gulp'); var browserify = require('browserify'); var source = require('vinyl-source-stream'); gulp.task('js', function(){ browserify({ entries: ['js/app.js'] }) .bundle() .pipe(source('main.js')) .pipe(gulp.dest('js/')); });
ポイントを説明します。
- 2行目 は gulp-browserify じゃない
- 3行目の vinyl-source-stream がいる
まず1番目の gulp-browserify じゃないということですが、これはなんだかもう更新されてなくてブラックリスト入りしてるらしい。
普通の browserify を使いましょう。
そして2行目の vinyl-source-stream ですが、私もあまりよくわかっていないのですが、
どうやら gulp とは、 vinyl というオブジェクトを返してそれをあれこれ手を加えていくもののようです。
そして、 bundle() で返されたオブジェクトは vinyl ではないので、 vinyl に変換する必要があると。
こちらの記事が参考になりました。
というわけで上述のようなソースになりました。
他参考にした記事は以下などなど
さらにこれを uglify したい
やったーできた、じゃあこれを uglify しよう! と思って、 pipe(source('main.js'))のあとに pipe(uglify()) 書いたらエラーでる…
と、調べたところ、これもやはり vinyl オブジェクト関連の問題だった。
vinyl-buffer というものをインストールすると uglify できるようになります!
$ npm install --save-dev vinyl-buffer
最終的な gulpfile.js は以下の様になりました。
var gulp = require('gulp'); var browserify = require('browserify'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var $ = require('gulp-load-plugins')({ pattern: ['gulp-*', 'gulp.*'], replaceString: /\bgulp[\-.]/ }); gulp.task('js', function(){ browserify({ entries: ['js/app.js'] }) .bundle() .pipe(source('main.js')) .pipe(buffer()) .pipe($.uglify()) .pipe(gulp.dest('js/')); });
bower もういらないかも?!
gulp-run-sequence is deprecated
というわけなのでgulp-run-sequenceを使っていたところは、run-sequenceに移行しましょう。www.npmjs.com
gulpfile.jsの書き方は全く一緒。