はじめまして、エンジニアのturryです。
主に社内システムの開発と保守をしております。
さて、ECMAScript6が2015年6月17日に正式に承認され、ブラウザ等でも徐々に実装が進んで来ております。
・ ECMAScript 6 compatibility table
http://kangax.github.io/compat-table/es6/
また、gulp.js、Gruntといったビルドツール、npmモジュールの充実等、フロントエンドの開発が変わってきていることを肌で感じております。
なので、これを機に何回かに分けてフロントエンド開発について紹介してみようと思います。

今回は、gulp+babelでのフロントエンド開発環境を作成してみます。

1. Node.jsのインストール

gulpはnpmモジュールですので、npmコマンドが使える様にNode.jsをインストールします。
今回はMacで環境構築をしますので、homebrewでさくっとインストールします。

$ brew install node

インストール後、npmコマンドが利用可能かご確認ください。

$ node -v
v0.12.2
$ npm -v
2.12.0
$

2. package.jsonの作成

次に、npmモジュールを管理するpackage.jsonを作成します。
まずは、作業用ディレクトリを作成し、移動します。

$ mkdir javascript-exsample
$ cd javascript-exsample

移動後、npm initコマンドを実行します。
実行時、対話形式でnameやauthor、git repository等の入力を求められますので、必要あれば入力してください。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (javascript-exsample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/turry/Projects/javascript-exsample/package.json:
{
"name": "javascript-exsample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
$

実行後、カレントディレクトリにpackage.jsonが存在するか確認してください。

$ ls
package.json
$

3. gulp+babelのインストール

それでは、gulpをインストールします。

$ npm install -g gulp

実行後、gulpコマンドが利用可能かご確認ください。

$ gulp -v
[10:59:30] CLI version 3.9.0
$

後は、gulpfile.jsをカレントディレクトリに作成し、各種処理コードを書いてgulpコマンドを実行すればビルドが開始されますが、このままだとES6形式でのコードで書いたgulpfile.jsは実行できません。
そのため、babelを介してES5形式に変換して実行する必要があります。
では、まずはbabelをインストールします。

$ npm install -g babel
$

インストール後、gulpfile.jsをgulpfile.babel.jsに名前を変更します

$ mv gulpfile.js gulpfile.babel.js
$

これで、ES6形式のコードでも読み込めるようになります。

以上で完了です。
次の更新では、実際にgulpfile.jsにコードを書いてビルドを実行してみようと思います。