gulp-imagemin コンパイルされず画像が圧縮できません。

前提・実現したいこと

gulp.fileで画像のサイズが大きいためgulp-imageminを使い圧縮したいのですができません。
原因を教えていただけませんでしょうかお願いいたします。

ディレクトリー構成
project>src>imgになります。

発生している問題・エラーメッセージ

javascript
1var imagemin = require("gulp-imagemin");
2var mozjpeg = require("imagemin-mozjpeg");
3var pngquant = require("imagemin-pngquant");
4var changed = require("gulp-changed");
5
6// srcImgフォルダのjpg,png画像を圧縮して、distImgフォルダに保存する
7gulp.task("default", function() {
8  return gulp
9  .src("./src/img*.{png,jpg}") // srcImgフォルダ以下のpng,jpg画像を取得する
10  .pipe(changed("distImg")) // srcImg と distImg を比較して異なるものだけ圧縮する
11  .pipe(
12    imagemin([
13      pngquant({
14        quality: [.7, .85], // 画質
15        speed: 1 // スピード
16      }),
17      mozjpeg({
18        quality: 70, // 画質
19        progressive: true
20      })
21    ])
22  )
23  .pipe(gulp.dest("src/img")); // 保存
24});

コマンドプロンプト
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.<anonymous> (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)

### 該当のソースコード

```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"
  ]
}

行動規範の内容に同意します

回答1件

ベストアンサー

エラーの内容を確認するようにしましょう。
Error: Cannot find module 'gulp-changed'とありますのでgulp-changedがインストールされていないことが原因のようです。
一度このプラグインをインストールして正しく動作するか確認してみてください。

投稿2019/12/02 02:55

nt4c

総合スコア768

oyu

2019/12/02 03:17

ありがとうございます。 gulp-changedをインストールしたのですが未だコンパイルされずです。 25行目のgulp.task("default", function() { が原因なのでしょうか？ PS C:\Users\rb197\Desktop\sample\project> gulp C:\Users\rb197\Desktop\sample\project\gulpfile.js:25 gulp.task("default", function() { ^ ReferenceError: gulp is not defined at Object.<anonymous> (C:\Users\rb197\Desktop\sample\project\gulpfile.js:25:1) 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) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at execute (C:\Users\rb197\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^4.0.0\index.js:36:18) at Liftoff.handleArguments (C:\Users\rb197\AppData\Roaming\npm\node_modules\gulp-cli\index.js:201:24)