Liveleset - Bild wird nicht sofort nach dem Hochladen Größe geändert

Question

Ich habe Schluck Aufgaben Scheduler für JavaScript Minification und Bildgrößenanpassung erstellt. Alle Dinge funktionieren gut, wenn ich den Befehl manuell ausführe.

Befehl:

gulp 

Aber wenn ich schlucke-livereload Modul enthalten automatisch auszuführen Betrieb Befehlszeile kontinuierlich beobachten, wenn ich Bilder laden, ist es nicht ändern. Nur Cursor blinkt. Wenn ein Bild hochgeladen wird, werden keine Aktivitäten in der Befehlsliste angezeigt.

gulpfile.js

// include gulp 
var gulp = require('gulp'); 

// include plug-ins 
var jshint = require('gulp-jshint'); 
var concat = require('gulp-concat'); 
var stripDebug = require('gulp-strip-debug'); 
var uglify = require('gulp-uglify'); 
var watch = require('gulp-watch'); 
var imageresize = require('gulp-image-resize'); 
var imagemin = require('gulp-imagemin'); 
var pngquant = require('imagemin-pngquant'); 
var liveReload = require("gulp-livereload"); 


// JS hint task 
gulp.task('jshint', function() { 
    gulp.src([ 
     './app/client/app.js', 
     './app/client/app.routes.js', 
     './app/client/modules/**/controllers/*.js', 
     './app/client/modules/**/directives/*.js', 
     './app/client/modules/**/services/*.js', 
     './app/client/services/*.js']) 
      .pipe(jshint()) 
      .pipe(jshint.reporter('default')) 
      .pipe(liveReload()); 
}); 

gulp.task('jsminification', function() { 
    gulp.src([ 
     './app/client/app.js', 
     './app/client/app.routes.js', 
     './app/client/modules/**/controllers/*.js', 
     './app/client/modules/**/directives/*.js', 
     './app/client/modules/**/services/*.js', 
     './app/client/modules/**/filter/*.js', 
     './app/client/services/*.js']) 
      .pipe(concat('script.js')) 
      .pipe(stripDebug()) 
      .pipe(uglify()) 
      .pipe(gulp.dest('./app/build/scripts/')) 
      .pipe(liveReload()); 
}); 


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

    // set the folder name and the relative paths 
    // in the example the images are in ./assets/images 
    // and the public directory is ../public 
    var paths = { 
     folder: 'media/', 
     src: './app/client/', 
     dest: './app/client/resize/' 
    }; 

    // create an array of image groups (see comments above) 
    // specifying the folder name, the ouput dimensions and 
    // whether or not to crop the images 
    var images = [ 
     // {folder: 'bg', width: 1200, crop: false}, 
     {folder: 'photo', width: 120, height: 120, crop: true}, 
     //{folder: 'projects', width: 800, height: 500, crop: true} 
    ]; 

    console.log("resize called"); 

    // loop through image groups   
    images.forEach(function (type) { 

     console.log(type); 

     var source_ = paths.src + paths.folder + type.folder + '/*'; 
     var scale_ = type.width + "x" + type.height + "/"; 
     //var destination_ = paths.dest + paths.folder + scale_ + type.folder; 
     var destination_ = paths.dest + scale_ + type.folder; 

     console.log(">source:" + source_); 
     console.log(">scale:" + scale_); 
     console.log(">destination:" + destination_); 

     // build the resize object 
     var resize_settings = { 
      width: type.width, 
      crop: type.crop, 
      // never increase image dimensions 
      upscale: false 
     } 

     // only specify the height if it exists 
     if (type.hasOwnProperty("height")) { 
      resize_settings.height = type.height; 
     } 

     gulp 
       // grab all images from the folder 
       .src(source_) 

       // resize them according to the width/height settings 
       .pipe(imageresize(resize_settings)) 

       // output each image to the dest path 
       // maintaining the folder structure 
       .pipe(gulp.dest(destination_)) 
       .pipe(liveReload()); 
    }); 
}); 

gulp.task('watch', function() { 
    liveReload.listen({host: process.env['HOST'], port: process.env['PORT']});  
    gulp.watch('./app/client/media/photo/*.{png,jpg,jpeg}', ['resize']); 
}); 

gulp.task('default', ['jshint', 'jsminification', 'resize', 'watch']); 

Ich möchte neues Bild in Fotoordner automatisch als Uploads Bild ändern.

Answer 1

Nach einigen R & D habe ich folgende Lösung mit "Schluckuhr" -Modul gefunden und es funktioniert gut.

// include gulp 
var gulp = require('gulp'); 

// include plug-ins 
var jshint = require('gulp-jshint'); 
var concat = require('gulp-concat'); 
var stripDebug = require('gulp-strip-debug'); 
var uglify = require('gulp-uglify'); 
var imageresize = require('gulp-image-resize'); 
var imagemin = require('gulp-imagemin'); 
var pngquant = require('imagemin-pngquant'); 
var watch = require("gulp-watch"); 
var newer = require("gulp-newer"); 

var paths = { 
    folder: 'media/', 
    src: './app/client/', 
    dest: './app/client/resize/' 
} 

var images = [ 
    {folder: 'photo', width: 120, height: 120, crop: true}, 
]; 

// JS hint task 
gulp.task('jshint', function() { 
    gulp.src([ 
     './app/client/app.js', 
     './app/client/app.routes.js', 
     './app/client/modules/**/controllers/*.js', 
     './app/client/modules/**/directives/*.js', 
     './app/client/modules/**/services/*.js', 
     './app/client/services/*.js']) 
      .pipe(jshint()) 
      .pipe(jshint.reporter('default')); 
}); 

// JS minification task 
gulp.task('jsminification', function() { 
    gulp.src([ 
     './app/client/app.js', 
     './app/client/app.routes.js', 
     './app/client/modules/**/controllers/*.js', 
     './app/client/modules/**/directives/*.js', 
     './app/client/modules/**/services/*.js', 
     './app/client/modules/**/filter/*.js', 
     './app/client/services/*.js']) 
      .pipe(concat('script.js')) 
      .pipe(stripDebug()) 
      .pipe(uglify()) 
      .pipe(gulp.dest('./app/build/scripts/')); 
}); 

// image resize 
gulp.task('resize', function() {  
    // loop through image groups   
    images.forEach(function (type) { 
     var source_ = paths.src + paths.folder + type.folder + '/*'; 
     var scale_ = type.width + "x" + type.height + "/"; 
     //var destination_ = paths.dest + paths.folder + scale_ + type.folder; 
     var destination_ = paths.dest + scale_ + type.folder; 

     // build the resize object 
     var resize_settings = { 
      width: type.width, 
      crop: type.crop, 
      // never increase image dimensions 
      upscale: false 
     } 
     // only specify the height if it exists 
     if (type.hasOwnProperty("height")) { 
      resize_settings.height = type.height; 
     } 

     gulp 
       // grab all images from the folder 
       .src(source_) 
       .pipe(newer(destination_)) 

       // resize them according to the width/height settings 
       .pipe(imageresize(resize_settings)) 

       // optimize the images 
       .pipe(imagemin({ 
        progressive: true, 
        // set this if you are using svg images 
        svgoPlugins: [{removeViewBox: false}], 
        use: [pngquant()] 
       })) 

       // output each image to the dest path 
       // maintaining the folder structure 
       .pipe(gulp.dest(destination_)); 
    }); 
}); 

// Gulp default task 
gulp.task('default', ['jshint', 'jsminification', 'resize'], function() {}); 

// Gulp watch for new image resizing 
watch('./app/client/media/photo/*.+(png|jpg|jpeg|gif)', function() { 
    gulp.run('resize'); 
});