grunt 任务的问题

Question

我的 package.json 是：

{
  "name": "pink",
  "version": "0.1.0",
  "private": true,
  "description": "Личный проект «Пинк» от HTML Academy",
  "devDependencies": {
    "@htmlacademy/editorconfig-cli": "0.1.x",
    "autoprefixer": "^6.7.7",
    "grunt": "^1.0.1",
    "grunt-browser-sync": "2.2.0",
    "grunt-contrib-imagemin": "^1.0.1",
    "grunt-contrib-less": "^1.4.0",
    "grunt-contrib-watch": "1.0.0",
    "grunt-css-mqpacker": "^3.0.1",
    "grunt-postcss": "0.8.0",
    "grunt-svgmin": "^4.0.0",
    "grunt-svgstore": "^1.0.0",
    "load-grunt-tasks": "^3.5.2",
    "postcss-csso": "^2.0.0"
  },
  "scripts": {
    "test": "editorconfig-cli",
    "build": "grunt less && grunt postcss",
    "start": "npm run build && grunt serve"
  },
  "editorconfig-cli": [
    "*.html",
    "*.json",
    "*.js",
    "js/**/*.js",
    "img/**/*.svg",
    "less/**/*.less"
  ],
  "engines": {
    "node": "6.7"
  }
}

Gruntfile.js 是：

"use strict";

module.exports = function(grunt) {

  require("load-grunt-tasks")(grunt);

  grunt.initConfig({
    less: {
      style: {
        files: {
          "css/style.css": "less/style.less"
        }
      }
    },

    postcss: {
      style: {
        options: {
          processors: [
            require("autoprefixer")({browsers: [
              "last 1 versions",
              "last 2 Chrome versions",
              "last 2 Firefox versions",
              "last 2 Opera versions",
              "last 2 Edge versions",
            ]}),
          ]
        },
        src: "css/*.css"
      }
    },

    browserSync: {
      server: {
        bsFiles: {
          src: [
            "*.html",
            "css/*.css"
          ]
        },
        options: {
          server: ".",
          watchTask: true,
          notify: false,
          open: true,
          cors: true,
          ui: false
        }
      }
    },

    watch: {
      style: {
        files: ["less/**/*.less"],
        tasks: ["less", "postcss"]
      }
    }
  });

  grunt.registerTask("serve", ["browserSync", "watch"]);
};

所有 Grunt 任务运行良好。

我添加了一个新的 grunt 插件，例如 imagemin (https://www.npmjs.com/package/grunt-contrib-imagemin)。

我更新后的 Gruntfile.js 看起来像这样：

"use strict";

module.exports = function(grunt) {

  require("load-grunt-tasks")(grunt);

  grunt.initConfig({
    less: {
      style: {
        files: {
          "css/style.css": "less/style.less"
        }
      }
    },

    postcss: {
      style: {
        options: {
          processors: [
            require("autoprefixer")({browsers: [
              "last 1 versions",
              "last 2 Chrome versions",
              "last 2 Firefox versions",
              "last 2 Opera versions",
              "last 2 Edge versions",
            ]}),
          ]
        },
        src: "css/*.css"
      }
    },

    // Configuration for imagemin-task
    imagemin: {
      dynamic: {
        options: {
          optimizationLevel: 3
        },
        files: [{
          expand: true,
          cwd: "src/",
          src: ["images/**/*.{png,jpg,gif}"],
          dest: "img/"
        }]
      }
    }

    browserSync: {
      server: {
        bsFiles: {
          src: [
            "*.html",
            "css/*.css"
          ]
        },
        options: {
          server: ".",
          watchTask: true,
          notify: false,
          open: true,
          cors: true,
          ui: false
        }
      }
    },

    watch: {
      style: {
        files: ["less/**/*.less"],
        tasks: ["less", "postcss"]
      }
    }
  });

  // Here is registerTask
  grunt.registerTask("default", ["imagemin"]);
  grunt.registerTask("serve", ["browserSync", "watch"]);
};

添加后，任务不再有效。

终端显示以下错误：

Loading "Gruntfile.js" tasks...ERROR

SyntaxError: Unexpected identifier Warning: Task "less" not found. Use --force to continue.

由于警告而中止。

bash: --force: 找不到命令

所有任务都出现相同的错误（例如，grunt less，在最后一次添加之前工作正常）。

怎么了？请帮助我。

添加逗号和新插件后 initConfig 如下：

  grunt.initConfig({
    less: {
      style: {
        files: {
          "css/style.css": "less/style.less"
        }
      }
    },

    postcss: {
      style: {
        options: {
          processors: [
            require("autoprefixer")({browsers: [
              "last 1 versions",
              "last 2 Chrome versions",
              "last 2 Firefox versions",
              "last 2 Opera versions",
              "last 2 Edge versions",
            ]}),
          ]
        },
        src: "css/*.css"
      }
    },

    csso: {
      style: {
        options: {
          report: "gzip"
        },
        files: {
          "css/style.min.css": "css/style.css"
        }
      }
    },

    imagemin: {
      images: {
        options: {
          optimizationLevel: 3
        },
        files: [{
          expand: true,
          cwd: "src/",
          src: ["images/**/*.{png,jpg,gif}"],
          dest: "img/"
        }]
      }
    },

    svgstore: {
      options: {
        svg: {
          style: "display: none"
        }
      }
      symbols: {
        files: {
          "images/symbols.svg": "images/icons/*.svg"
        }
      }
    },

    svgmin: {
      symbols: {
        files: [{
          expand: true,
          src: ["images/icons/*.svg"]
        }]
      }
    },

    browserSync: {
      server: {
        bsFiles: {
          src: [
            "*.html",
            "css/*.css"
          ]
        },
        options: {
          server: ".",
          watchTask: true,
          notify: false,
          open: true,
          cors: true,
          ui: false
        }
      }
    },

    watch: {
      style: {
        files: ["less/**/*.less"],
        tasks: ["less", "postcss"]
      }
    }
  });

但是我又犯了同样的错误

Answer 1

您在（新添加的）imagemin 块后缺少一个逗号：

imagemin: {
    // ...
} // <- right here

browserSync: {
    // ...

grunt 任务的问题

problems with grunt tasks

gruntjs