0

gulp ファイルを全体的に改善する必要があると思います。しかし、現在私を最も悩ませているのは、gulp watch の動作です。gulp-watch を使用して gulp-connect をリロードし、chrome を更新します。問題は、すべてのファイルに対して個別にトリガーされることです。

これが私のgulpファイルの抜粋です：

gulp.task('copySources', function() {
    gulp.src('src/*.html')
        .pipe(gulp.dest('dist'));
    gulp.src('src/css/*css')
        .pipe(gulp.dest('dist/css'));
    gulp.src('src/images/**')
        .pipe(gulp.dest('dist/images'));
    gulp.src('src/api/**')
        .pipe(gulp.dest('dist/api'));
});

gulp.task('webserver', function() {
    connect.server({
        livereload: true,
        root: ['dist']
    });
});

gulp.task('livereload', function() {
    gulp.src('dist/**')
        .pipe(connect.reload());
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['lint', 'scripts']);
    gulp.watch('src/*.html', ['copySources']);
    gulp.watch('src/css/*.css', ['copySources']);
    gulp.watch('src/images/**', ['copySources']);
    gulp.watch('src/api/**', ['copySources']);
    gulp.watch('dist/**', {verbose: true}, function(files) {
        console.log(files);
    });
    gulp.watch('libs/**', ['copyLibs']);
});

最後のウォッチを['livereload']、デバッグ目的でファイル パスを出力する関数に変更しました。(verbose 設定は効果がないようです。) gulp を実行すると、次のような出力が得られます。

{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\index.html' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\css\\bootstrap.min.css' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\css\\style.css' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\api\\recipe.json' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Chocolate_Cake.png' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Mint_Tea.png' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\all.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Penne_Pasta.jpg' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\cc_logo.svg' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\all.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.min.js.map' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.min.js.map' }

問題は、監視がすべてのファイルに対して個別にトリガーされることです。ウィンドウの高さによっては、lint 警告がスクロールして表示されなくなる可能性があるため、これは面倒です。この問題を解決するにはどうすればよいですか?

4

2 に答える 2

0

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

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:01:45.650 に答える