1

babel/の中のJSファイルを実行すると、下記のようにトランスパイルされているようなのですが
./babel-destの中身が空のままです。

・./babel-destのカレントディレクトリは、gulpfile.jsのあるフォルダと考えてよいでしょうか?
このファイルがjsフォルダの中にbabel-destフォルダと一緒に入っているのでこの指定で正しいはずですよね。

・出力先のフォルダ指定が間違っているならエラーが出るのではないのでしょうか?
うまくいかなくてもエラーが出ないなら切り分けができません。

・実行結果

js>gulp babelwatch
(node:6432) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[20:14:15] Using gulpfile js\gulpfile.js
[20:14:15] Starting 'babelwatch'...
[20:14:15] Finished 'babelwatch' after 41 ms
[20:15:15] Starting 'babeltrance'...
[20:15:15] Finished 'babeltrance' after 50 ms
[20:17:18] Starting 'babeltrance'...
[20:17:18] Finished 'babeltrance' after 38 ms
[20:44:01] Starting 'babeltrance'...
[20:44:01] Finished 'babeltrance' after 91 ms
[20:45:22] Starting 'babeltrance'...
[20:45:23] Finished 'babeltrance' after 30 ms

・ソースコード抜粋

var gulp = require('gulp');              
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss');  
var cssnext = require('postcss-cssnext'); 
var csswring = require('csswring');
var babel = require("gulp-babel");
var browserSync = require('browser-sync').create();
var csscomb = require('gulp-csscomb'); 
var plumber = require('gulp-plumber');



gulp.task('babeltrance', function() {
  gulp.src('babel/*')
    .pipe(plumber())
    .pipe(babel({
      presets: ['es2015'],
    }))
    .pipe(gulp.dest('./babel-dest'));
});

gulp.task('babelwatch', function() {
  gulp.watch('babel/*', ['babeltrance']); 
});

gulp.task('babel', ['babeltrance', 'babelwatch']);
~

1 件の回答 1

0

./babel-destのカレントディレクトリは、gulpfile.jsのあるフォルダと考えてよいでしょうか?

gulp.destのAPI上は、options.cwdのデフォルト値がprocess.cwd()となっているので、カレントディレクトリは、gulpfile.jsのあるフォルダではなく、gulpを実行したフォルダになるようです。

出力先のフォルダ指定が間違っているならエラーが出るのではないのでしょうか?

gulp.destFolders that don't exist will be created.とあるので、フォルダ指定が間違っていてフォルダが存在しない場合にも自動で作成するようです。

切り分けのためには、gulp-debugというものがあるようです。
パイプラインの途中にはさめば、ストリームの状態をターミナルに出力してくれるようです。


補足です。

gulp -hによると、以下のように別ディレクトリのgulpfileを指定して実行する場合は、

gulp --gulpfile ./js/gulpfile.js babelwatch

自動的に、gulpfileが格納されているディレクトリにCWDを移動するようです。
そのため、gulp.srcgulp.dest内のパスは、gulpfile格納ディレクトリからの相対パスで書くと良いみたいです。

以下は、ヘルプの抜粋です。

--gulpfile, -f          Manually set path of gulpfile. Useful if you have
                          multiple gulpfiles. This will set the CWD to the
                          gulpfile directory as well.                   [文字列]
8
  • カレントディレクトリは、~\js>gulp babelwatchとコマンドプロンプトで実行しているのでjsフォルダがカレントディレクトリになっているのですね、これを実行したフォルダをカレントディレクトリとして、出力フォルダ内ないしはフォルダがなければ自動作成して出力するのですね、 Commented 2018年7月21日 15:35
  • それならうまくいっていればjsフォルダ内にbabel-destフォルダを自動的に作成するはずなのですね、 Commented 2018年7月21日 15:37
  • @nicomesecond さん、そうなると思います。
    – user28902
    Commented 2018年7月21日 21:02
  • このようになりました、根本的におかしいのでしょうか?portfolio\js>gulp --gulpfile ./js/gulpfile babelwatch [12:06:56] No gulpfile found Commented 2018年7月22日 3:10
  • @nicomesecond さん、 portfolio\js>はシェルのカレントディレクトリがjsということではないでしょうか? もしそうであれば、portfolio\js>gulp --gulpfile ./gulpfile babelwatch を実行すれば解決するかもしれません。
    – user28902
    Commented 2018年7月22日 3:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。