Home>

I want to use gulp-imagemin for compression because gulp.file has a large image size.
Could you tell me the cause?

Directory structure
project>src>img

Error message
var imagemin = require ("gulp-imagemin");
var mozjpeg = require ("imagemin-mozjpeg");
var pngquant = require ("imagemin-pngquant");
var changed = require ("gulp-changed");
// Compress jpg and png images in srcImg folder and save in distImg folder
gulp.task ("default", function () {
  return gulp
  .src ("./ src/img *. {png, jpg}") // Get png, jpg images under the srcImg folder
  .pipe (changed ("distImg")) // Compare srcImg and distImg and compress only different ones
  .pipe (
    imagemin ([[
      pngquant ({
        quality: [.7, .85], // image quality
        speed: 1 // speed
      }),
      mozjpeg ({
        quality: 70, // image quality
        progressive: true
      })
    ])
  )
  .pipe (gulp.dest ("src/img"));// save
});
Command prompt
PS C: \ Users \ rb197 \ Desktop \ sample \ project>gulp
internal/modules/cjs/loader.js: 584
    throw err;
    ^
Error: Cannot find module 'gulp-changed'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js: 582: 15)
    at Function.Module._load (internal/modules/cjs/loader.js: 508: 25)
    at Module.require (internal/modules/cjs/loader.js: 637: 17)
    at require (internal/modules/cjs/helpers.js: 22: 18)
    at Object.  (C: \ Users \ rb197 \ Desktop \ sample \ project \ gulpfile.js: 22: 15)
    at Module._compile (internal/modules/cjs/loader.js: 701: 30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js: 712: 10)
    at Module.load (internal/modules/cjs/loader.js: 600: 32)
    at tryModuleLoad (internal/modules/cjs/loader.js: 539: 12)
    at Function.Module._load (internal/modules/cjs/loader.js: 531: 3)
### Corresponding source code

package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run imagemin: watch",
"imagemin": "node index.js",
"imagemin: watch": "onchange \" src/images \ "-npm run imagemin"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^ 4.0.2",
"gulp-autoprefixer": "^ 7.0.1",
"gulp-change": "^ 1.0.2",
"gulp-imagemin": "^ 6.2.0",
"gulp-sass": "^ 4.0.2",
"gulp-sourcemaps": "^ 2.6.5",
"imagemin": "^ 7.0.1",
"imagemin-gifsicle": "^ 6.0.1",
"imagemin-keep-folder": "^ 5.3.2",
"imagemin-mozjpeg": "^ 8.0.0",
"imagemin-pngquant": "^ 8.0.0",
"imagemin-svgo": "^ 7.0.0",
"npm-run-all": "^ 4.1.5",
"onchange": "^ 6.1.0",
"rimraf": "^ 2.6.3",
"watch": "^ 1.0.2"
},
"browserslist": [
"last 2 versions",
"Firefox>= 4",
"Android>= 4",
"ios_saf>= 8"
]
}
`` `

  • Answer # 1

    Check the error details.
    There isError: Cannot find module 'gulp-changed', so it seems thatgulp-changedis not installed.
    Please install this plug-in once and see if it works properly.