livereload - 이미지가 업로드 직후에 크기가 조정되지 않습니다.

Question

JavaScript 확장 및 이미지 크기 조정을 위해 꿀꺽 꿀꺽하는 작업 스케줄러를 만들었습니다. 수동으로 명령을 실행하면 모든 것이 잘 작동합니다.

명령 :

gulp 

그러나 나는 이미지를 업로드 할 때 명령 줄 지속적으로 감시, 자동으로 작업을 수행 할 꿀꺽 - livereload 모듈을 포함 할 때, 그것은 크기를 조정하지 않습니다. 커서가 깜박입니다. 이미지를 업로드 할 때 명령 감시 목록에 활동이 표시되지 않습니다.

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']); 

나는 사진 폴더에 새 이미지 업로드 자동으로 이미지 크기를 조정합니다.

Answer 1

일부 R & D 이후 "gulp-watch"모듈을 사용하여 다음 해결책을 찾았지만 제대로 작동합니다.

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