61

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()すべてではなく、このイメージでのみ実行されます。

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

ありがとう。

4

9 に答える 9

58

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

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

于 2014-06-03T08:31:43.923 に答える
37

別のオプションは、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(path) {
      gulp
        .src(path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });
于 2015-08-17T11:54:11.817 に答える
7

インクリメンタル ビルドは、バージョン 4.0 以降、プラグインなしで Gulp でネイティブにサポートされています。プロジェクト READMEからの例を次に示します。

const paths = {
  ...
  images: {
    src: 'src/images/**/*.{jpg,jpeg,png}',
    dest: 'build/img/'
  }
}

function images() {
  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
    .pipe(imagemin())
    .pipe(gulp.dest(paths.images.dest));
}

function watch() {
  gulp.watch(paths.images.src, images);
}
于 2020-05-25T14:25:00.627 に答える
3

独自の関数でパスとファイル名を操作できる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
}

ここに画像の説明を入力

于 2015-03-20T07:06:33.873 に答える
1

ええ、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());
});
于 2014-05-27T19:33:15.490 に答える
0

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

gulp.watch('path to watch', function(event){
  if(event.type === 'changed') { 
    gulp.start('your:task');
  }
};
于 2016-05-28T17:47:10.710 に答える