livereload - 图片上传后不会立即调整大小

Question

我已经为 JavaScript 缩小和调整图像大小创建了 gulp 任务调度程序。当我手动执行命令时，一切都很好。

Command:

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

经过一些研发，我找到了以下使用 "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');
});

livereload - 图片上传后不会立即调整大小

livereload - Image is not resize immediately after uploading

node.js

gulp

gulp-watch

gulp-livereload