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"]);
};

在此添加之后，任何任务都不再有效。

终端显示以下错误：

正在加载＆＃34; Gruntfile.js＆＃34;任务...错误



SyntaxError：意外的标识符警告：任务＆＃34; less＆＃34;未找到。使用--force继续。



因警告而中止。

bash： - force：command not found

所有任务都会出现相同的错误（例如，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任务的问题

1 个答案: