Grunt拒绝创建custom.min.css文件

Question

我目前正在学习如何在我的一个类中使用带有Grunt的PostCSS。当被问到我的教授是否可以帮助我时，他们说Gruntfile.js看起来不错，但问题可能是我的文件名是小写的。我把它改成Gruntfile.js，收到了同样的错误。它应该自动创建custom.min.css，但由于下面的错误，它没有。我联系了我的教授，但我们似乎已经走到了死胡同。

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

C:\Users\name\Desktop\grunt样板文件>加载"；Gruntfile.js"；任务。。。错误SyntaxError:无效或意外的令牌

警告：任务"默认"；找不到。使用--force继续。由于警告而中止。

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

我做错了什么？

Answer 1

加载错误"Gruntfile.js"；任务

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

请参阅：https://gruntjs.com/getting-started#an-示例gruntfile

现在谈谈第一个问题。

软件包

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

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

Autoprefixer的使用

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

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-

更改dist属性

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

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