ここ数年Web開発に関わってきてシステムの開発だけでは生きていけないと実感し、
やっとマークアップの作業にも手を出し始めました今日このごろです。

タイトルの通り、フロントエンドエンジニアを目指してということで、
デザインチームの勉強会に混じりWEBフォントの自作を行ってみました。



皆さんは、gulpというタスク自動化ツールをご存知でしょうか？
自分も勉強会に出るまで名前すらしならなかったのですが、
少し調べてみるとCSS、JSファイルの圧縮、結合、Sassのコンパイル、AWSのS3へのファイルアップロード
など、タスクを自分で組めばかなり色々なことができるようです。

今回はそのgulpを使ってWEBフォントを作成するということで、
gulp導入までをとりあえず備忘録として書いていきたいと思います。

手順としては、
Homebrewのインストール＞nodebrewのインストール＞gulpのインストール
となります。

あ、ちなみに導入についてはMacが前提となりますので。。。
Windowsの方はそっと閉じて下さい。

Homebrew

Homebrewとは、なんぞやっという話になると思うのですが、
簡単に言うと、コマンド一発でソフトウェアのインストール、アンインストールができるものっと思っていただければOKだと思います。

Homebrewのインストール

では早速、Homebrewのインストールですが、
Homebrew 公式サイトに書かれているように以下のコマンドをterminalで入力+EnterしていただければOKです。

Xcodeをインストールしている方は、何事もなくインストールが完了すると思いますが、
インストールしていない方はCommand Line Toolsのインストール等を求められますので、インストールしてください。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストール後、以下のメッセージが表示されれば完了です。

==> Installation successful!
You should run `brew doctor' *before* you install anything.

Homebrewのインストール確認

上記のインストール作業が完了後、以下のコマンドをterminalで実行してください。

brew doctor

Warning等が表示されていなければ、Homebrewのインストールは完了です。

nodebrew

nodebrewですが、node.jsを自分のマシン内でバージョン管理するためのツールです。
node.jsを普通にインストールするでも全然構いませんが、nodebrewをインストールしておけば、バージョンの切り替えが簡単に行えてかなり便利です。

nodebrewのインストール

nodebrewのインストールは、homebrewを使ってインストールしますので、
上記のhomebrewのインストールを行っていることを前提とします。

まずはhomebrewでnodebrewがインストール可能かを確認するため、
以下のコマンドをterminalで実行してください。

「No formula found for ...」等のメッセージが表示されず、「nodebrew」と表示されればインストール可能です。

brew search nodebrew

では、次にインストールですが、以下のコマンドをterminalで実行してください。

brew install nodebrew


最後にインストールを確認するために、以下のコマンドをterminalで実行してください。
nodebrewのバージョンが表示されれば、無事インストール完了となります。

nodebrew

nodebrewのパスを通す

nodebrewでインストールするnode.jsにパスを通す必要があるため、
「~/.bash_profile」ファイルに以下の内容を追記して、「source ~/.bash_profile」をterminalで実行してください。

export PATH=$HOME/.nodebrew/current/bin:$PATH

.bash_profileはFinderからはそのままだと確認できないため、
terminalで「vi ~/.bash_profile」を実行してもらい、編集するのが楽だと思います。
viについては、通常のテキストエディタと編集の仕方が異なりますので、「vi linux」等で調べてください！

node.jsをインストール

nodebrewを使用して、node.jsをインストールします。
以下のコマンドをterminalで実行してください。

nodebrew install-binary "version"　version部分は自分がインストールしたいversionに置き換えてください

今回使用したバージョンはv0.10.36なので、「nodebrew install-binary v0.10.36」となります。

node.jsの指定

以下のコマンドをterminalで実行すると、nodebrewでインストールしたnode.jsの一覧が表示されます。
currentについては、現状使用しているnode.jsのバージョンのため、何も設定していない場合は「none」と表示されます。

nodebrew list

nodebrewでインストールしたnode.jsの一覧から、使用するnode.jsを指定するために、
以下のコマンドをterminalで実行するします。

nodebrew use "version"　version部分は自分がインストールしたいversionに置き換えてください

最後に以下のコマンドをterminalで実行し、自分が指定したバージョンが表示されれば、
nodebrewのインストール、設定が完了となります。

node -v

ここで、Errorが出る場合は、パスを通すことに失敗している場合が多いので、
「~/.bash_profile」の内容確認、または、「source ~/.bash_profile」を実行をしてみてください。

gulp

gulpの説明については、上記で説明しているので割愛させていただきます！

gulpのインストール

以下のコマンドをterminalで実行するだけで完了です。

npm install -g gulp

これでWarning等が表示されなければインストール完了です。

まとめ

今回インストールしたものはすべてterminalからコマンドを打って行いました。
システムに関わっている人にとっては、簡単だとは思いますが、デザイナーの方には取ってはかなりハードルものとなりますので、助けになれば幸いです。

次回はインストールしたgulpの設定、タスクの作成について書いていきたいと思います！