用意するファイル
- package.json
- gulpfile.js
- index.html
- es6/
- main.js (最初は取りあえず空で)
pakage.json
{
"devDependencies": {
"babel": "^4.7.16",
"gulp": "^3.8.11",
"gulp-babel": "^4.0.0"
},
"scripts": {
"watch": "gulp watch"
}
}
gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
var src_dir = './es6/**/*.js'
gulp.task('default', function () {
return gulp.src(src_dir)
.pipe(babel())
.pipe(gulp.dest('js'));
});
gulp.task('watch', function(){
gulp.watch(src_dir, ['default']);
});
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>babel-sample</title>
</head>
<body id="content">
<script src="js/main.js"></script>
</body>
</html>
動かす手順
$ npm install$ npm run watch-
index.htmlを web ブラウザで表示
まだ js/main.js が無いので es6/main.js に適当に ES6 の機能をいれて書いてみる。
watch で監視されていれば js/ ディレクトリにファイル作成されるはず。
es6/main.js
let foo = 'world';
let el = document.getElementById('content');
el.textContent = `Hello, ${foo}!`;
で web ブラウザで確認すると表示されるはず。
振り返り
- jishint を使ってるとワーニングとエラーが出まくるから eslint の導入検討したい。いつかの日か、たぶんそのうち。