こんにちは、エンジニアのturryです。
最近は、node.js5やbabel6のリリース情報が発表され、ますます JavaScript界隈が活気付いているのを感じます。
Node.js ChangeLog
https://github.com/nodejs/node/blob/v5.0.0/CHANGELOG.md
babel 6.0.0 Released
http://babeljs.io/blog/2015/10/29/6.0.0/
さて、前回はgulp+babelでのフロントエンド開発環境を作成しました。
今回は、実際にgulpfile.babel.jsにコードを書いて、ビルドしてみます。

１、基本的な処理の流れ

せっかくなので、gulpの API docsに記載されていますソースコードを元に説明します。
gulp API docs
https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('build/minified_templates'));

上記について、どのような挙動をおこなっているか一行ずつ説明してみます。
１行目では、client/templates/フォルダにあるjade拡張子のファイルを読み込んでおります。
２行目では、１行目で読み込んだjadeファイルを、htmlファイルに変換します。
３行目では、２、３行目で処理したファイルを、build/minified_templates/フォルダに格納します。
この様に、gulp.src()で指定したファイルを読み込み、pipe()内に記載された様々な処理を順々に行い、gulp.dest()で指定したフォルダに格納する、というのが基本的な流れとなります。

２、実際に動かしてみる

上記ソースコードでは、ビルドはできません。
それでは、実際にビルドできるコードに書き直してみます。
まず、必要なnpmモジュールをインストールします。

$ npm install --save-dev gulp
$ npm install --save-dev babel-core
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev gulp-jade

gulpによる処理を行うためgulpを、ES6形式でコードを記載するため、babel-core、babel-preset-es2015を、そしてjadeファイルをhtmlファイルに変換するためgulp-jadeをインストールします。
npm install でモジュールをインストールする場合、— save-dev オプションを追加することで、package.json にモジュール情報が自動的に追加され、次回以降はnpm installで必要なnpmパッケージは全てインストールされます。

$ npm install --save-dev gulp-load-plugins

次に、gulp-*がつくnpmモジュールを自動で読み込むgulp-load-pluginsをインストールします。

$ echo -e "{\n\t\"presets\": [\"es2015\"]\n}" > .babelrc

最後にbabelで使用するプリセットをes2015に指定するため、package.jsonに上記コマンドで.babelrcファイルを作成します。
これで準備が整いました、実際にコードを書いてみます。

'use strict';
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();
const common = {
  src: 'client/templates/*.jade',
  dist: 'build/minified_templates'
};
gulp.task('htmls', () => {
  return gulp.src(common.src)
  .pipe($.jade({ pretty: true }))
  .pipe(gulp.dest(common.dist));
});

このような形となります。
importでnpmモジュールを読み込み、gulpのタスク[‘htmls’]を作成し、実行する流れです。
Jadeについては、こちらをご参照ください。
Jade – Temprate Engine(Language Reference)
http://jade-lang.com/reference/
それでは、client/templates にjadeファイルを配置してみます。

doctype html
html
  head
    title Javascript Exsample
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, minimum-scale=1.0, maximum-scale=1.0')
    meta(name='format-detection', content='telephone=no')
  body
    p 404 Error

それでは、ビルドしてみます。

gulp htmls

これで、build/minified_templatesにindex.htmlが作成されます。

以上で完了です。
次の更新では、bootstrap を導入してみます。