web-dev-qa-db-ja.com

Gulp-ファイルのコピーと名前変更

私はGulpに非常に新しいです。基本的には、変更されたJavaScriptファイルを監視し、新しい名前で新しいコピーを作成しようとしています。 （最終的には何らかの処理が行われますが、ローマは1日で構築されませんでした）。

私の（素朴な）試みはこれです：

gulp.task('default', function() {

    return gulp.watch('../**/**.js', function(obj){
        gulp.src(obj.path)
            .pipe(gulp.dest('foobar.js'));
    });

});

これにより、変更されたファイルが取得され、foobar.jsというフォルダーに正常にコピーされます。 gulp.dest('foobar.js')を置き換えることができ、srcファイルをコピーして名前を変更するだけの簡単なものはありますか？

編集

所定の場所にコピーするということは、変更されたファイルを取得し、そのコピーを正しい名前で作成することを意味します現在の場所。 （Windowsで）ファイルをクリックし、control-c control-vを押して、結果のファイルの名前を変更するのと同じです。

javascriptgulpgulp-watch
55
Adam Rackis

私はあなたが何を意味するのか100％確信していません

コピーして名前を変更...

ただし、現在のコードに基づいて、単に以下を実行したい場合：

  1. parentディレクトリ内のすべての.jsファイルを監視し、
  2. それらをcwd（現在の作業ディレクトリ）にコピーし、
  3. 名前allコピー、ソースファイルのに関係なく、same thing

次に、 gulp-rename を使用してそれを実行できます。

var gulp = require('gulp');
var rename = require('gulp-rename');

gulp.task('default', function() {
  return gulp.watch('../**/**.js', function(obj) {
    gulp.src(obj.path)
      .pipe(rename('newFileName.js'))
      .pipe(gulp.dest('.'));
  });
});

この場合、出力ファイル名はnewFileName.jsです

モジュールを使用するには、gulp-renameパッケージをnpmでインストールする必要があります（例：npm install gulp-rename）。

その他の例は、npm @ https://www.npmjs.com/package/gulp-rename#usage のパッケージ詳細ページで入手できます。

74
knksmith57

そこまでたどり着いたわけではありませんでしたが、最終的にはこれが私が望んでいるように見えます（途中でES6のトランスコンパイルが行われます）。

キーは、srcへの呼び出しのベースプロパティを持つオプションオブジェクトのように見えます。これが、destへの呼び出しで現在のファイルのパスを維持するために必要なもののようです。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    babel = require('gulp-babel');

gulp.task('default', function() {
    return gulp.watch('../**/$**.js', function(obj){
        if (obj.type === 'changed') {
            gulp.src(obj.path, { base: './' })
                .pipe(babel())
                .pipe(rename(function (path) {
                    path.basename = path.basename.replace('$', '');
                }))
                .pipe(gulp.dest(''));
        }
    });
});
10
Adam Rackis