Grunt refuses to create a custom.min.css file

问题

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?

回答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']);
};

来源：https://stackoverflow.com/questions/64057354/grunt-refuses-to-create-a-custom-min-css-file

标签

gruntjs