ES2015を学ぼうと思い、gulpでビルドできるようにしたいと思います。
それのメモです。
packege.jsonを生成
npm init
全部Enterでとにかく生成
各モジュールのインストール
npm i -D gulp
npm i -D gulp-babel
npm i -D babel-preset-es2015
package.jsonはこんなのが並ぶ
"devDependencies": {
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2"
}
ここで、gulp-babelが6.x.x以上なので.babelrcが必要
そのために、babel-preset-es2015のモジュールをインストールしていた。
.babelrcファイルの作成
{
"presets": ["es2015"]
}
gulpfile.jsを作成
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('babel', function(){
gulp.src('src/js/*.js')
.pipe(babel())
.pipe(gulp.dest('dist/js'))
});
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['babel'])
});
gulp.task('default', ['babel', 'watch'])
ディレクトリの確認
.
├── .babelrc
├── dist
│ └── js
│ └── app.js
├── gulpfile.js
├── package.json
└── src
└── js
└── app.js
使い方
gulpコマンドを実行後
/src/js/app.jsを編集すれば、/dist/js/app.jsが生成されます。
あくまでもこれは現在ブラウザ対応するために変換しそれを確認するだけのためのものです。
gulpの使い方がわかる方はあとはごにょごにょカスタマイズして楽しめばいいと思います。
わからない方は、dotinstall gulp入門をやればいいと思います。