Grunt拒绝创建custom.min.css文件 [英] Grunt refuses to create a custom.min.css file

问题描述

我目前正在我的一门课上学习如何将PostCSS与Grunt一起使用.问我的教授是否可以帮助我，他们说Gruntfile.js看起来不错，但问题可能出在我的文件名是小写字母.我将其更改为Gruntfile.js，并收到相同的错误.它应该自动创建custom.min.css，但是由于错误(位于下面)，所以没有.我联系了我的教授，但看来我们已经走到了尽头.

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.

每次我为Grunt创建JS文件，将其保存在正确的文件夹中，然后在命令提示符下运行grunt时，都会收到以下错误消息:

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>加载"Gruntfile.js"任务...错误SyntaxError:无效或意外的令牌

C:\Users\name\Desktop\grunt-boilerplate> Loading "Gruntfile.js" tasks...ERROR SyntaxError: Invalid or unexpected token

警告:任务默认"未找到.使用--force继续.由于警告而中止.

Warning: Task "default" not found. Use --force to continue. Aborted due to warnings.

我的JS编码如下:

  // 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']);

};

我在做什么错了?

推荐答案

加载"Gruntfile.js"时出错.任务

至于终端中的错误，似乎您在文件开头缺少此行:
module.exports = function(grunt){

请参阅: https://gruntjs.com/getting-started#an-example-gruntfile

现在是第一个问题.

首先，检查所有节点模块的正确安装.

First of all, check the correct installation of all your node modules.

1. 打开您的终端机
2. cd 到项目根目录， package.json 所在的位置
3. 执行 npm install
4. 执行 npm install autoprefixer grunt grunt-postcss pixrem cssnano --save-dev

1. Open your terminal
2. cd to your project root, where the package.json is located
3. Do npm install
4. Do npm install autoprefixer grunt grunt-postcss pixrem cssnano --save-dev

自动前缀的用法

您可能以错误的方式使用了autoprefixer插件:您需要将 browsers 选项移动到您的 package.json 文件中:

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%'
    ]
}

请参阅: https://github.com/browserslist/browserslist#browserslist-

您可以尝试使用 files 属性更改您的 dist 语法:

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'
    }
}
...

摘要

整个 Gruntfile.js 应该看起来像这样:

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

这篇关于Grunt拒绝创建custom.min.css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！