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
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
Related articles
- javascript - (react) css cannot be changed using props
- javascript - is there a way to keep information that cannot be disclosed to the outside, such as access keys, on the front end s
- php - cannot load javascript on individual page of custom post
- javascript - graph cannot be drawn with chartjs
- javascript - about the error "cannot read property'indexof' of null"
- javascript - cannot xmlhttprequest to localhost8000
- javascript - in express, i get an error saying cannot set headers after they are sent to the client
- javascript - in site production, when images of the same design with different sizes are provided, how should i switch the image
- cannot set transform: rotate value from variable in javascript
- javascript - global components cannot be used
- javascript "uncaught typeerror: cannot read property'property name'of undefined" error meaning
- javascript - cannot save due to syntax error
- javascript - react django typeerror: cannot read property'map' of null error
- javascript - if the error continues in express, cannot set headers after they are sent to the client
- javascript - cordova-plugin-camera ver50 cannot be used
- javascript - the for statement cannot be executed in order by onclick
- javascript - the pdf file acquired by cannot be displayed by filereader
- javascript - body cannot be sent during axios delete method
- javascript - if you cancel by selecting a file, images will be added for the number of cancellations
- [javascript/rails] follow function cannot be implemented asynchronously
- javascript : Swiper pagination
- javascript - i want to change the hamburger menu to a bento box
- javascript : How to keep the position of the navigation buttons when pressed?
- css3 : Can't position the block at the desired position CSS, flex /
- i want to make a hamburger menu with jquery
- javascript : Phaser.js + Electron Framework. Why does not it work?
- css3 : How to apply a font to a utf character
- html : Transparent text on mouseover
- When the page is resized, the content slides off the sides of HTML + CSS
- javascript : I want to retrieve the selected value from the radio button enclosed in the form
Check the error details.
There is
Error: Cannot find module 'gulp-changed'
, so it seems thatgulp-changed
is not installed.Please install this plug-in once and see if it works properly.