problems with grunt tasks - gruntjs

Question

My package.json is:
{
"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 is:
"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"]);
};
All Grunt tasks are working well.
I added a new grunt plugin, for example, imagemin (https://www.npmjs.com/package/grunt-contrib-imagemin).
My updated Gruntfile.js looks like this:
"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"]);
};
After this addition, no tasks work anymore.
Terminal shows me the following error:
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Unexpected identifier Warning: Task "less" not found. Use --force to continue.
Aborted due to warnings.
bash: --force: command not found
The same error appears for all tasks (for example, grunt less, which was working correctly before the last addition).
What's wrong? Please help me.
After addition the comma's and new plugins initConfig is following:
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"]
}
}
});
But I have the same mistake again.

Answer 1

You're missing a comma after the (newly added) imagemin block:
imagemin: {
// ...
} // <- right here
browserSync: {
// ...