livereload - アップロード直後に画像のサイズが変更されない

Question

JavaScriptの縮小と画像のサイズ変更のためにgulpタスクスケジューラを作成しました。手動でコマンドを実行すると、すべてうまく動作します。

コマンド：

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