GulpでCSS/JavaScriptコンパイル環境を構築する ─ CentOS編
従来、WEBフロントエンドの主要アセットであるCSSとJavaScriptはソースレベルでなかなか管理しづらく、すぐにカオスな領域に突入して保守しづらくなっていました。そのカオスな領域にあるCSSやJavaScriptをソースレベルでもっと保守管理しやすいように生み出されたのがGruntやGulpというコンパイルビルドの仕組みです。今の世の流れ的に、フロントエンド開発ではSCSS（SASS、LESS等）、CoffeeScriptなどでCSSやJavaScriptのコーディングを効率化しつつ、同時にソースの保守管理をし易くするという開発手法がデフォルトになってきました。 実際にLESSで変数を使ったCSSスタイリングや、コード量が劇的に少ないCoffeeScriptでJavaScriptを書いてみると、圧倒的なコード生産性の高さに、もはや今までのベタなフロントエンドコーディング手法は改めざるを得ないという境地になります。 ──と云うことで、早速CSS/JavaScriptのコンパイルビルドを行う環境をサービス提供用のCentOSサーバに作ってみようかと思います（ローカル開発環境としてのWindowsマシンへの導入はこちらの記事を参照）。 ちなみに、Gulpは「ガルプ」と読みます。私は最初「グループ」とか読んでました…（笑） Node.js のインストール まずはGulpはnode.jsのモジュールなので、node.jsをインストールしないことには始まりません。そんな訳で、node.jsをインストールするのですが、まずはnode.jsやライブラリのバージョン管理モジュールであるnvmからインストールしていきます。 下記のように、nvmをGitHubからクローンして同梱のシェルでインストールします。 $ git clone git://github.com/creationix/nvm.git ~/.nvm $ . ~/.nvm/nvm.sh 次に、node.jsをインストールするのですが、その前に現在のnode.jsの安定バージョンを Node.jsの公式サイト を確認しましょう。TOPページの真ん中あたりに「Current Version: v0.12.2」というように記載されているので、そのバージョンをインストールするのが無難です（2015年4月7日時点のNode.jsの安定バージョンは0.12.2でした）。 インストールバージョンが決定したら、nvmでインストールします。 $ nvm install v0.12.2 $ node -v v0.12.2 バージョン確認してインストールバージョンが表示されればOKです。 最後に、自分のコンソール環境でnode.jsが利用できるように .bashrc に以下の記述を追記しておきます。 $ vim .bashrc $ cat .bashrc # .bashrc # Source global definitions if [ -f /etc/bashrc ]; then ....GulpでCSS/JavaScriptコンパイル環境を構築する ─ Windows編
いまさら感が強いんですが、世の流れ的に、フロントエンド開発ではSCSS（SASS、LESS等）、CoffeeScriptなどでCSSやJavaScriptのコーディングを効率化しつつ、同時にソースの保守管理をし易くするという開発手法がデフォルトになってきました。私はその辺の技術の取り込みがおっくうで、ついついCSSやJavaScriptを素でコーディングしてしまったりしていたのですが、最近やっている Ruby on Rails の開発でCoffeeScriptでJavaScript書いてみて、圧倒的なコード生産性の高さに、もはや今までのベタなフロントエンドコーディング手法は改めざるを得ないという境地に達しました（いやはや、ようやくですねぇ…）。 ──と云うことで、早速CSS/JavaScriptのコンパイルビルドを行う環境を業務マシンであるWindowsマシンに作ってみようかと思います（WEBサービス側のCentOS(Linux)環境への導入はこちらの記事を参照）。 なお、なぜビルドツールをGruntではなくGulpにしたかというと、今どきのトレンドはGulpの方かなぁ…という漠然な理由だったりするんですが、まぁ、Gruntより設定ファイルが記述しやすく、複数リソースの設定があっても設定が煩雑化しないというメリットもあるからです。 Node.js のインストール まずはGulpはnode.jsのモジュールなので、node.jsをインストールしないことには始まりません。そんな訳で、node.jsをインストールします。 インストールは簡単で、Node.jsの公式サイトからインストーラーをダウンロードするだけです。私の業務用マシンは「Windows7（64bit版）」だったので、node-v0.12.0-x64.msi というファイルが対象になります（2015年3月4日時点のNode.jsのバージョンは0.12.0です）。 インストーラがダウンロードできたら、早速起動させます。いくつか対話が発生しますが、特に注意しないといけないようなインストール設定はありません。 イントールが完了したら、コマンドプロンプト（もしくは、パワーシェル）から、Node.jsのバージョンを確認してみます。 > node -v v0.12.0 ついでにバンドルでインストールされているnpmのバージョンも確認してみます。 > npm -v 2.5.1 これでNode.jsのインストールは完了です。 Gulp のインストール 次にGulpをグローバルにインストールします。 > npm install -g gulp > glup -v [**:**:**] CLI version 3.8.11 これでインストール完了です。もしインストールに失敗するようなら、 > npm install -g gulp --mscs_version=2012 ──とオプションを付けてみると上手くいくかもしれません。 次に、ローカルにインストールします。 ローカルにインストールするにあたっては、npmの初期化を行う必要があります。まず任意にgulpを実行したいディレクトリを作成します。この記事では、C:\npm\node_modules\gulp というディレクトリを新たに作成しています。...フロントエンド開発ツールマップみたいな何か。JavaScriptフレームワーク、AltJS、CSSプリプロセッサ、HTMLテンプレートとかまとめ。
2月1日より社員になりましたくぼたなるひとです。初ブログです。つーかいっそ今日から社員なので初業務です。 ちなみにデザイナーです。でもフロントエンドエンジニアになりつつあります。でもデザイナーです。 はい、意味不明な前置きはやめて本題です。 今日はフロントエンド開発ツールについて概観してみようと思います。 「やっぱりフロントエンドエンジニアじゃねえか！」とか言わないでください。 HTML/CSS/JavaScriptだよね。 フロントエンド開発の人が扱うものといえば、基本はHTML/CSS/JavaScriptという認識ですよね。 その他ツールとしてはブラウザとエディタさえあれば、極端ですが即開発できます。簡単ですね。 およそ間違ってないですね。 こんな感じ。 フロントエンド開発に携わっていない方の認識はざっくりとこんな感じだと思います。 およそ間違ってないですね。(2回目) ベストプラクティスを追い求めてみた。 さて、では開発のベストプラクティスを求めていくとどうなるでしょうか。 ぱーっと思いつく限りで一覧っぽくしてみようと思いました。 こんな感じ は？ 嘘だ・・・・・・夢だろ・・・・・・これ・・・・・・夢に決まってる・・・・・・・・・！ ところがどっこい・・・・・・夢じゃありません・・・・・・！現実です・・・・・・！これが現実です・・・！ フロントエンドエンジニアに求められているものは右肩上がりに増え続けています。もちろんお給料はきっと据え置きです。世の中無情である。 言うまでもなく、技術を追い続けるか、知らんぷりするかは個人の裁量に委ねられる訳ですが。 どうしてこんなことになってるわけよ？ ／)( ◕ ‿‿ ◕ )(＼ わけがわからないよ 要因1 - Webのリッチ化＆モバイル化 Ajax 非同期通信の使用したUI構築技術。ページ遷移せずにデータを持ってこれる。 これのおかげでGoogleMapsが使えると思えば感謝せずにはいられない。 今ではページ遷移しないでいろいろできるなんてふつうの感覚になっているが、それくらい当然のように恩恵を受けている技術です。 他にもすごーくたくさん増えたものがあります。 クロスサイトスクリプティング クロスサイトリクエストフォージェリ SQLインジェクション 厨二病っぽい感じありますね。心がくすぐられます！ 全部セキュリティ問題です。 統計的に見ると3つトータルで1,000件/年間くらい起きてるらしいです。それまでほとんどなかったのに。統計データのグラフとかどっかから引用したかったのですが、じょうほうじゃくしゃなので見つけられませんでした( ◠‿◠ )うーむ 詳しく知りたい人は以下のリンクへどうぞ。とてもよくまとまっています。 Ajaxの脆弱性を理解する - IBM developerWorks HTML5/CSS3の登場 HTML5はこれまでのバージョンと比べて新しい指針を打ち出しました。ウェブアプリケーションのプラットフォームになろうとしています。直近の一例として昨日ついにYouTubeの動画がFlashベースからHTML5ベースに変わるというニュースが発表されました。 さらにCSS3も登場したことで、フロントエンドでできることが増えています。...