zukucode
主にWEB関連の情報を技術メモとして発信しています。

gulpをES2015で実装する

gulpES2015(ES6)で実装するための手順です。

gulpのインストール

gulpがインストールされていない場合はインストールします。(nodejsは導入済みとします。)

グローバルとローカルの両方にインストールします。

グローバル
$ npm install -g gulp
ローカル
$ npm install --save-dev gulp

babelのインストール

babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。

以下の4つのパッケージをインストールします。

  • babel-cli
  • babel-core
  • babel-preset-es2015
  • babel-preset-stage-0
$ npm install --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-stage-0

設定ファイルの作成

.babelrcという名前のファイルをプロジェクトのルートフォルダに作成します。

このファイルを作成しておけば、babelを実行する時に自動でこの設定ファイルを読み込みます。

.babelrc
{
  "presets": ["es2015", "stage-0"]
}

設定内容は必要に応じて書き換えてください。

gulpfileの作成

gulpのタスクを実装するファイルを作成します。

babelを使わない場合はgulpfile.jsというファイル名ですが、今回はbabelを使用するため、gulpfile.babel.jsというファイル名になります。こうすることにより、gulpが自動的にbabelを読み込むようになります。

これでgulpES2015で実装する環境が整いました。

動作確認

gulpfile.babel.jsを以下のように実装します。

gulpfile.babel.js
import gulp from 'gulp';

gulp.task('default', () => {
  console.log('gulpをES2015で実装する');
});

そして、以下のコマンドを実行すると「gulpをES2015で実装する」と出力されればOKです。

$ gulp

続きを表示

関連記事

  • gulp front-matterの内容をdataとして使用する

    ブログの記事を作成するにあたって、titleやdescriptionのメタ情報やカテゴリー、タグなど、ファイルごとに管理する情報はfront-matterの形式で管理すると便利です。front-mat...


  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • gulp markdownを変換してnunjucksで扱う

    実際に公開するhtmlファイルの中身はmarkdownから変換したhtmlの内容だけではなく、titleやdescriptionなどのmetaタグやヘッダ、フッタなどの情報が必要です。そのため、mar...


  • gulp markdownの内容をhtmlに変換する

    gulpでmarkdownの形式で記載したデータをhtmlに変換します。本ブログのように技術ブログの場合はコードをシンタックスハイライト(色付け)して表示したいので、highlight.jsもインスト...


  • gulp nunjucksをコンパイルしてhtmlに変換する

    nunjucksで記載されたテンプレートエンジンをhtmlに変換します。今回はnunjucksのコンパイルにgulp-nunjucks-renderを使用します。特に設定をしなくても正しく動作するので...


  • nunjucks includeで絶対パスを指定する

    nunjucksの便利な機能の1つにincludeがあります。ファイルパスはデフォルトでは相対パスで設定されます。なのでメインとなるnjkファイルのパスによって以下のようになってしまいます。これではフ...


  • 静的サイトジェネレーターを自作してブログ作成システムを作成

    JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作してみようと思いました。以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。


  • Vue.jsを学習する上で知っておきたいES2015の文法

    Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...


  • gulp 引数を受け取って開発時とリリース時で処理を分岐する

    コマンドラインでタスクを実行する際に、以下のようにパラメータを指定して、タスク処理では指定されたパラメータを受け取って処理を分岐するようにします。minimistを使えば上記の形式で指定したパラメータ...