web-dev-qa-db-ja.com

Gulpウォッチで変更されたファイルでのみタスクを実行する方法

Gulpfileで使用している現在のgulpタスクがあります。パスはconfig.jsonからのものであり、すべてが完全に機能します。

_//Some more code and vars...

gulp.task('watch', function() {
    gulp.watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], ['imagemin-cfg']);
})

//Some more code ...

gulp.task('imagemin-cfg', function () {
    return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
});
_

しかし、私にはまだ問題があります。私のプロジェクトの画像の数は膨大であり、このタスクには時間がかかります。変更されたファイルでのみタスクを実行する方法を探しています。イメージがある場合、または変更する場合、imagemin()はこのイメージでのみ実行され、すべてではありません。

繰り返しますが、すべてが完全に正常に機能していますが、実行時間が非常に長くなっています。

ありがとう。

gulpgulp-watch
51
soenguy

「gulp-changed」は、「buildType」フォルダーにファイルされた変更のみを監視するため、これを行うための最良のソリューションではありません。

代わりに gulp-cached を試してください。

52
nktssh

別のオプションは、gulp.watch on（ "change"）オプションを使用することです。

gulp
  .watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"])
  .on("change", function(file) {
      gulp
        .src(file.path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });
31
Brad Berger

Gulp.watchを使用すると、このように変更されたもののみファイルをターゲットにできます。

gulp.watch(["src/**/*"], function (obj) {
 return gulp.src(obj.path, {"base": "src/"})
 .pipe(gulp.dest("dest"));
});

編集：Gulp v4：

const { watch, src, dest } = require('gulp');

var watcher = watch(["src/**/*"]);
watcher.on('change', function(obj){
    return src(obj.path, {base: 'src/'})
        .pipe(dest('dest'));
});
9
lofihelsinki

gulp-newy をお勧めします。ここで、独自の関数でパスとファイル名を操作できます。次に、関数をnewy()へのコールバックとして使用します。これにより、比較するファイルを完全に制御できます。

これにより、1対1または多対1の比較が可能になります。

newy(function(projectDir, srcFile, absSrcFile) {
  // do whatever you want to here. 
  // construct your absolute path, change filename suffix, etc. 
  // then return /foo/bar/filename.suffix as the file to compare against
}

enter image description here

3
dman

これは、追加のパッケージを必要とせずにこれを行うために常に使用している実際の例です。これを使用して、jsディレクトリ内の.jsファイルを縮小、名前変更、コンパイルします。コンパイルされたファイルは、distディレクトリに保存され、拡張子の前に.minが追加されます。

// Compile JS
var compileJS = function( file ) {
    var currentDirectory = process.cwd() + '/';
    var modifiedFile = file.path.replace( currentDirectory, '' );

    gulp.src( modifiedFile )
        .pipe( uglify() )
        .pipe( rename( {
            suffix: ".min"
        } ) )
        .pipe( livereload() )
        .pipe( gulp.dest( 'dist' ) );
};

// Watch for changes
gulp.watch( 'js/*.js', [ 'js' ] ).on( "change", compileJS );

上記の答えは部分的に不完全で、私には少し不明瞭でしたが、基本的な例を探している他の人に役立つことを願っています。

1
Kevin Leary

ええ、gulp-changedはまさにそれを行います：

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

gulp.task('imagemin-cfg', function () {
return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
    .pipe(changed(buildType))
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest(buildType))
    .pipe(connect.reload());
});
1
urban_raccoons

タスクまたはコールバックには、ファイルが追加、削除、または変更されたかどうかを通知するtypeプロパティを持つイベントパラメーターがあります。最善の策は、タスクの条件でそれを利用することです。

gulp.watch('path to watch', function(event){
  if(event.type === 'changed') { 
    gulp.start('your:task');
  }
};
0
Luis Lasser