Comment faire pour exécuter une tâche UNIQUEMENT sur fichier modifié avec Gulp regarder

J'ai l'actuel gulp tâche dont je me sers dans un gulpfile. Chemin d'accès sont d'une config.json et tout fonctionne parfaitement:

//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());
});

Mais j'ai encore un problème, le nombre d'images de mon projet est énorme et cette tâche prend une éternité. Je suis à la recherche d'un moyen d'exécuter ma tâche UNIQUEMENT sur les fichiers modifiés. Si j'avais une image ou de le modifier, imagemin() ne fonctionnera que sur cette image, et non sur l'ensemble.

Une fois de plus, tout fonctionne parfaitement bien, mais le temps d'exécution est très long.

Grâce.

InformationsquelleAutor soenguy | 2014-05-27

gulp gulp-watch

51

"gulp modifié" n'est pas une meilleure solution pour faire cela, parce qu'il montre seulement modifié déposée dans "buildType" le dossier.

Essayer gulp-mis en cache à la place.
- Cela fait un monde de différence et il était vraiment facile à mettre en œuvre. Merci!
- Exactement ce que je cherchais. Merci!!!!
- Intéressant de noter que gulp-en cache le cache est vide lors de la première exécution. Donc, si vous compter sur elle, votre première course de la montre tâche sur tous les fichiers donné. Pas un gros problème pour certains scénarios, mais il m'a pris par surprise.
InformationsquelleAutor nktssh
30

Une autre option est d'utiliser le trait.regarder sur("changement") de l'option.
```
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());
  });
```
- Si vous utilisez cette méthode, vous devrez gérer la relative chemin de destination du fichier vous-même, parce que gulp ne pas le faire lui-même.. au moins il travaille à la fin 🙂
- Cela ne fonctionne pas.
- Ce qui ne fonctionne pas à ce sujet?
- Je ne me souviens pas. Mais je vais vous dire au bout de 7 mois. Restez à l'écoute.
- cela fait 7 mois - pourriez-vous nous dire maintenant?
- C'est juste un sarcasme.
- C'est parfait. J'ai juste besoin le patron de modifier uniquement les fichiers spécifiques qui sont modifiées.
InformationsquelleAutor Brad Berger

Avec gulp.regardez, vous pouvez cibler seule la modification des fichier comme ceci.

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

Edit: pour 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'));
});

Quand je fais cela je reçois invalide glob argument error: undefined.
Qu'est-ce que votre nom de la tâche, essayez de la modifier?

InformationsquelleAutor lofihelsinki

3

Puis-je suggérer gulp-newy dans laquelle vous pouvez manipuler le chemin d'accès et nom de fichier dans votre propre fonction. Ensuite, il suffit d'utiliser la fonction de rappel à la newy(). Cela vous donne un contrôle complet des fichiers que vous souhaitez comparer.

Cela permettra à 1:1 ou plusieurs à 1 compare.
```
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
}
```
InformationsquelleAutor dman

Ouais, gulp-changé est exactement cela:

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());
});

InformationsquelleAutor urban_raccoons

1

Voici un exemple réel que j'utilise tout le temps pour faire tout cela sans la nécessité pour toutes les autres paquets. Je l'utilise pour rapetisser, de renommer et de compiler tout .fichier js dans le js répertoire. Compilé les fichiers sont enregistrés dans un dist répertoire avec .min ajouté avant l'extension.
```
//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 );
```
Les réponses ci-dessus semble partiellement incomplète et un peu moins clair pour moi, j'espère que cela est utile pour quelqu'un d'autre la recherche d'un exemple de base.
- C'est la plus straight-forward réponse, et il ne repose pas sur le traitement de chaque fichier et de le comparer avec une version mise en cache. Merci!
InformationsquelleAutor Kevin Leary
0

Dans la tâche ou de rappel, vous devez un paramètre d'événement, qui a un type de propriété, qui vous dira si le fichier a été ajouté, supprimé ou modifié. Meilleur pari est de faire usage de dans une condition sur votre tâche.
```
gulp.watch('path to watch', function(event){
  if(event.type === 'changed') { 
    gulp.start('your:task');
  }
};
```
InformationsquelleAutor Luis Lasser

Vous devez vous connecter pour publier un commentaire.