Grunt refuses to create a custom.min.css file - gruntjs

Question

I'm currently learning how to use PostCSS with Grunt in one of my classes. Asked my professor if they could help me, they said the Gruntfile.js looked fine, but maybe the issue was my file name being lowercase. I changed it to Gruntfile.js and am receiving the same error. It is automatically supposed to create the custom.min.css, but due to the error (located below), it does not. I contacted my professor, but it seems that we've hit a dead-end.
Every time I create the JS file for Grunt, save it in the correct folder, and I run grunt in my Command Prompt, I receive the following error:
C:\Users\name\Desktop\grunt-boilerplate>
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Invalid or unexpected token
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
My JS coding looks like this:
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({
browsers: 'last 2 versions'
}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'css/custom.css',
dest: 'css/custom.min.css',
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-postcss');
// Default task(s).
grunt.registerTask('default', ['postcss']);
};
What am I doing wrong?

Answer 1

Error loading "Gruntfile.js" tasks
As for the error in the terminal, it seems like you're missing this line at the start of the file:
module.exports = function (grunt) {
See: https://gruntjs.com/getting-started#an-example-gruntfile
Now about the first problem.
Packages
First of all, check the correct installation of all your node modules.
Open your terminal
cd to your project root, where the package.json is located
Do npm install
Do npm install autoprefixer grunt grunt-postcss pixrem cssnano --save-dev
Autoprefixer usage
You are probably using the autoprefixer plugin in a wrong way: you need to move the browsers option into your package.json file:
Gruntfile.js
...
processors: [
require('pixrem')(),
// No autoprefixer 'browsers' option
require('autoprefixer')(),
require('cssnano')()
]
...
package.json
{
...
// 'browserslist' option at the end of the file just above the last curly brace
'browserslist': [
'last 4 versions',
'> 0.5%'
]
}
See: https://github.com/browserslist/browserslist#browserslist-
Changing dist property
You could try changing your dist syntax using files property:
...
dist: {
// src: 'css/custom.css',
// dest: 'css/custom.min.css',
files: {
'css/custom.min.css': 'css/custom.css'
}
}
...
Summary
The whole Gruntfile.js should look something like that:
module.exports = function (grunt) {
grunt.initConfig({
// This is probably a leftover from the example Gruntfile.js
// pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('pixrem')(),
// No autoprefixer 'browsers' option
require('autoprefixer')(),
require('cssnano')()
]
},
dist: {
// src: 'css/custom.css',
// dest: 'css/custom.min.css',
files: {
'css/custom.min.css': 'css/custom.css'
}
}
}
});
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['postcss']);
};