Monthly Archives: 4月 2015

gulp.js

2015.4.18

たまにはこういうのも書いてみます。
最近ちょっと転職とか考えてみたりしててwebデザイナーとかフロントエンドエンジニアとかの求人を見ていると募集要項に「Gitを使ったチームでのソース管理」、「SASSやLESSを用いた開発経験」とか、「UI/UXを意識したサイトデザイン」とか書いてあってちょっとびっくりしてます。数年前に転職考えてた頃の求人は「Photoshop、 illustratorの実務経験x年」、とか「HTML、CSSの知識」とかだったような。
自分も趣味レベルでサイトとか作っててCSS3のほんの一部にjQueryのプラグインいっぱい使ってダイナミックだろ?ってドヤ顔してたんですけど、多分そういう人が最先端のweb作ってる会社に自信満々にいくと怪我するっぽい。
というのも去年の夏くらいに社内で、あいつちょっとHTMLかじってるらしいよみたいな噂が流れてマーケティングのほうに誘われ、異動することになり、最初はレスポンシブなHTMLメールを作るみたいなことをずっとやって(CRMメールのほぼ全てをレスポンシブにしてやりました)、それと平行してちょっとしたLPとか特設ページみたいなの作るようになったりして、そこでまず衝撃を受けたのがGitを使ったバージョン管理。趣味レベルでサイト構築してる人あるあるだと思うけど、ある部分を修正するコード半日くらい書いて、よし直ったって満足して眺めてたら違う部分のデザイン崩れてて、どこのタイミングからおかしくなってたのかわからなくて涙目みたいな現象。Gitでバージョンを管理してると更新履歴が残るので遡って、ここからおかしくなってるっていうのが突き止められます。何人かでひとつのファイルを修正する場合も間違って他人の修正に上書きしちゃうなんてこともありません。他にもいろいろ利点はあるのですが、詳しくはGitでググったらいっぱいでてくると思います。
さらに衝撃を受けたのがstylus。最初stylusって聞いてナニソレ美味しいの?って感じだったんですけど一度使うとcssを一から書くのがものすごく億劫になります。stylusっていうのはcssの拡張メタ言語で、上で書いたSASSとかLESSとかと同じ類です。例えばこんな感じ。

.content
 width 100%
 p
  color red

とstylusファイルに書いてコンパイルすると、

.content {
  width: 100%;
}
.content p {
  color: #f00;
}

ってな具合のcssファイルが吐き出される仕組みです。インデントすればいいだけなので深いセレクタも楽々。やはりチームで作業する際に個人の書き方の癖みたいなのがでなくなって誰が書いても綺麗なcssになるっていうのが利点かも。

前置きが長くなりましたがタイトルのgulp.jsの話です。タスクランナーっていう言葉も求人でちょくちょく見かけます。タスクランナーは拡張メタ言語のコンパイルから圧縮、書き出しなどを自動化するツールのことで有名なものに、Gruntや今回僕がインストールしたgulp.jsなどがあります。会社ではcodekitっていう有料のコンパイラを使っているのですが、自宅でもstylus使いたいけど有料のコンパイラは買うほどじゃないしっていうのと、あとやっぱ流行のタスクランナー使いたいっていうのがあってgulp.jsをインストールしました。
ちょっと前にもインストールを試みたんですがERR!って言われて放置してたんですが気をとりなおして。Node.jsとnpmがインストールされてる前提です。

まずgulpのグローバルインストール。

sudo npm install -g gulp

適当な場所にprojectフォルダを作成。

mkdir -p /Users/xxxx/project/stylus /Users/xxxx/project/css
cd /Users/xxxx/project/

projectフォルダにgulpをインストール。

sudo npm install --save-dev gulp

すると

npm ERR! Error: No compatible version found

などと言われたのでNodeのバージョンをv0.10.12からv0.10.23に変更。ちなみにnpmのバージョンは1.3.17です。

nodebrew use v0.10.23

gulpのインストールが完了しました。お次はパッケージです。

sudo npm install gulp-stylus
sudo npm install gulp-minify-css

projectフォルダにgulpfile.jsを作ります。

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var minifyCSS = require('gulp-minify-css');

gulp.task('stylus', function() {
  gulp.src('stylus/*')
    .pipe(stylus())
    .pipe(gulp.dest('css/'));
});

gulp.task('minify-css', function() {
  return gulp.src('css/*.css')
    .pipe(minifyCSS({keepBreaks:false}))
    .pipe(gulp.dest('./dist/'))
});

gulp.task('default', ['stylus','minify-css'])

というわけでさっそくprojectのstylusフォルダにさっきの.stylファイルを入れてgulpと叩いてみます。
めでたくproject/distの中にMinifyされた.cssが入っていました。


※2015.4.19 追記
sudoしないとPlease try running this command again as root/Administrator.って言われる問題が解決しました。下記を実行すると.npmディレクトリ内全てがユーザー権限で動かせるようになるみたい。
sudo chown -R $(whoami) /Users/xxxx/.npmこれでsudoしなくて済むようになりました。

桜2015 Part3

2015.4.13

P4110017P4110027P4110046P4110054P4110068P4110090I went to Takata park in Niigata to see the “Yozakura” yesterday.Takata park is one of the three beautiful spot of seeing sakura at night in Japan.For your information, the other two is Hirosaki park in Aomori and Ueno park in Tokyo.

首都圏では桜は散ってしまいましたが、今年はあまり花見らしい花見もできなかったのでまだまだ見足りなくて、どこかで桜見れないかなって探してたら甲信越は今くらいがちょうど見頃っぽくて、さくっと行けそうなとこ探してたら日本三大夜桜のひとつに数えられてる新潟の高田公園っていうとこを見つけて新潟くらいだったら日帰りで余裕でしょwってことで昨日行ってきました。ちなみに三大夜桜は青森の弘前公園、新潟の高田公園、あと上野公園らしいです。

朝8時前に家でて軽井沢で一回寄り道して昼食食べてから上信越道に乗って16時前に上越高田に着きました。長野あたりではうっすら晴れ間も出てたんですけど新潟に近づくに連れて悪天候になってきて結局小雨ぱらついてました。夜桜まで時間があったので高田名物の雁木通りを見に行きました。雁木というのは家屋から道路側に突き出した雪よけの屋根の事で高田には雁木通りが総延長約16kmあるそうです。ただ雁木通りって言っても厳密にどこがそうって決まってるわけじゃなくて市の至る所に雁木通りがあって、特に大町通り、東本町通り、南本町通りが有名っていうことらしいです。そのあとは高田公園にいって出店のお好み焼き食べたりしました。出店の数がはんぱじゃなかったw桜のシーズン中は公園内の三重櫓もライトアップされてます。高田城は旧陸軍第十三師団が司令部とした場所でそれを記念して在郷軍人会が2200本の桜を植えたのがこの高田公園の桜の始まりだそうです。ちなみに第十三師団の師団長はプロペラ髭で有名な長岡外史です。行かなかったけど近くに旧陸軍第13師団長官舎があったみたい。

一個失敗したのはインター降りると観桜会パーキングはこちらみたいな看板があって、それの矢印に従って行き着いたとこに車停めたんですけど、あとから調べたらそこは会場まで徒歩25分の一番遠い駐車場だったみたいです(無料)。駐車場までのシャトルが出てたんで帰りはそれ乗ったんですが大人ひとり200円で400円かかりましたwシャトルって聞くと無料のイメージだったんでお金用意しないでバス乗り込んだら前払いですって言われちゃいましたよw公園に近めのところの有料駐車場は1台500円/日だったんで、絶対そっちのほうがよかったw

上越市 高田城百万人観桜会 2015