質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

4161閲覧

gulpでbabelを実行しても変換されません

dialbird

総合スコア379

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2016/03/24 13:07

こんばんは

サイトを参考にgulpでjs/srcディレクトリ下にあるes6で書いた以下のjsファイルをbabelで変換したいのですが、出力はされるものの、インデントが整理されるくらいで書いてある内容が全く変換されません。

//es6 var bar = () => { console.log("ok"); }; if(true){ let foo = "bar"; console.log(foo); } console.log(foo); //babel変換後も文章は全く同じ

gulpは以下のように書いています

javascript

1var gulp = require('gulp'), 2 babel = require('gulp-babel'), 3 plumber = require('gulp-plumber'); 4 5 6gulp.task('babel',function(){ 7 gulp.src('js/src/*.js') 8 .pipe(plumber()) 9 .pipe(babel()) 10 .pipe(gulp.dest('js/build')); 11}); 12 13gulp.task('watch',function(){ 14 gulp.watch('js/src/*js',['babel']); 15}); 16 17gulp.task('default',['babel','watch']);

gulp-babelもgulpも間違いなくローカルにインストールしてありますし、一応グローバルにnpmでbabelもインストールしました。
何が足りないのかを教えてください。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これ僕も一瞬ハマったんですが、おそらくpresetの記述が足りないのだと思います!

確か今のverだとes5に変換するというのを明示的に書く or インストールする必要があります
僕のローカルのgulpfileはこのような感じです。

gulp.task('babel', function() { gulp.src('./frontends/es6/**/*.es6') .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") //<- })) .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('./assets/javascripts/')) });

http://qiita.com/kosuke_nishaya/items/cf7f8a2dbb8e47d064fd
これなどを参考にされるといいと思いますよ!

投稿2016/03/24 15:55

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dialbird

2016/03/24 21:36

MasakazuFukamiさん ご返答ありがとうございます! おっしゃる通りnpmでbabel-preset-es2015をインストールしたらできました! ありがとうございます!
MasakazuFukami

2016/03/24 21:45

そう言っていただけて嬉しいです!
dialbird

2016/03/24 21:47

すみません 追加で質問させてください! 拡張子に関してですが、es6とjsとで違いはあるのでしょうか? es6で記述してあることを明示的に示せるくらいでしょうか?
MasakazuFukami

2016/03/24 21:48

んーーーなぜでしょうね。。。 そこに疑問を持ったことがなかったです。。。 おそらく明示的に示せるだけだだと思います! すいませんこんな感じで(´;ω;`)
dialbird

2016/03/24 22:18

ということは使い勝手的には変わりはないようですね! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問