grunt 入门_PostCSS快速入门指南：Grunt设置

grunt 入门

在上一个教程中，我们介绍了如何使用Gulp设置PostCSS项目。 在本教程中，我们将通过使用Grunt达到相同的目的。 在本教程结束时，您将了解如何使用所选的任何插件来设置PostCSS + Grunt项目。

注意 ：如果您以前从未使用过命令行或任务运行器，建议您在开始本教程之前阅读我们的免费系列： Web设计命令行 。

先决条件

在与Grunt一起工作时，我们假设您已经安装了使用它的先决条件：

• Node.js
• NPM
• 吉特

如果不确定是否已安装这些工具，请按照教程Web设计命令行：驯服第三者软件包 。

请确保您已全局安装了Grunt CLI，并通过遵循Web设计命令行：使用Grunt自动化了解其基本用法。 此外，请按照教程“针对Grunt的安装项目”部分中的说明进行操作。 在继续之前，您应该具有以下项目文件夹：

• 一个“ gruntfile.js”（Gruntfile）
• 一个“ package.json”文件
• Grunt已安装到“ node_modules”文件夹中，并设置为项目的开发依赖项。

PostCSS通过Grunt

在项目文件夹中，添加两个子文件夹，一个名为“ src”，另一个名为“ dest”。 “ src”文件夹将保存您未处理CSS文件，而PostCSS会将已编译CSS文件写入“目标”文件夹。

您需要做的下一件事是将PostCSS的Grunt插件安装到您的项目中：我们将使用grunt-postcss处理编译。

在指向您的项目文件夹的终端/命令提示符中，运行命令：

npm install grunt-postcss --save-dev

此时，您的项目结构应如下所示：

打开您的Gruntfile进行编辑，然后开始添加所有Gruntfiles所需的基本代码外壳：

module.exports = function(grunt) {
};

在其中，我们将使用grunt.loadNpmTasks()函数来加载grunt-postcss插件，如下所示：

module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
};

现在，我们准备开始配置用于运行postcss的Grunt任务。 首先，在刚添加的行上方添加grunt.initConfig()函数：

module.exports = function(grunt) {
grunt.initConfig({
});
grunt.loadNpmTasks('grunt-postcss');
};

在其中，设置一个名为postcss的对象， postcss所示：

module.exports = function(grunt) {
grunt.initConfig({
postcss: {
}
});
grunt.loadNpmTasks('grunt-postcss');
};

在新的postcss对象中，我们将添加两个嵌套的对象，一个命名options ，一个命名为dist ：

module.exports = function(grunt) {
grunt.initConfig({
postcss: {
options: {
},
dist: {
}
}
});
grunt.loadNpmTasks('grunt-postcss');
};

该options对象将举行PostCSS的配置和dist对象将举行，其中我们CSS文件应该从读取和写入信息。

现在开始，在项目的“ src”文件夹中创建一个名为“ style.css”CSS文件。 向其中添加一些测试代码，例如：

.test {
background: black;
}

现在更新dist对象，以指定“ src / style.css”作为我们的源文件，并指定“ dest / style.css”作为我们要生成的文件：

dist: {
src: 'src/style.css',
dest: 'dest/style.css'
}

然后，在options对象内，添加一个名为processors的空数组。 这是我们将配置PostCSS插件以便稍后使用的地方。 现在，只需将其更新为：

options: {
processors: [
]
},

运行测试编译

现在您的基本postcss任务已准备就绪。 要进行测试，请在终端/命令提示符仍然指向项目文件夹的情况下，运行以下命令：

grunt postcss

在您的终端中，您应该看到以下消息：

Running "postcss:dist" (postcss) task
>> 1 processed stylesheet created.

现在，在“目标”文件夹中，您应该找到一个新的“ style.css”文件，其中包含与“ src”文件夹中的“ style.css”文件相同的代码。

添加PostCSS插件

接下来，我们将添加一系列PostCSS插件和包： Autoprefixer （添加供应商前缀）， cssnext （启用将来的语法）和precss （使用Sass之类的功能扩展）。

运行以下命令以将每个命令安装到您的项目中：

npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precss --save-dev

注意 ： cssnext和precss安装可能需要一些时间，因为它们包含多个插件。

现在，我们准备通过我们先前创建的processors数组来加载每个插件。 将该数组更新为以下内容：

processors: [
require('autoprefixer')(),
require('cssnext')(),
require('precss')()
]

让我们继续吧，现在将一些测试代码添加到源“ style.css”文件中，并检查我们新设置的PostCSS插件是否按预期工作。

删除文件中已有的文件，然后添加以下CSS：

/* Testing autoprefixer */
.autoprefixer {
display: flex;
}
/* Testing cssnext */
.cssnext {
background: color(red alpha(-10%));
}
/* Testing precss */
.precss {
@if 3 < 5 {
background: green;
}
@else {
background: blue;
}
}

现在再次运行grunt postcss命令，“目标”文件夹中的结果文件应具有以下内容：

/* Testing autoprefixer */
.autoprefixer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Testing cssnext */
.cssnext {
background: rgba(255, 0, 0, 0.9);
}
/* Testing precss */
.precss {
background: green
}

您将在.autoprefixer类中看到， .autoprefixer已添加了供应商前缀。 在.cssnext类中，cssnext生成了rgba()颜色。 最后，在.precss类中， @if @else已评估了@if @else条件。

设置插件选项

注意，如果要配置插件的选项，请在该插件的require()函数之后的第二对括号中传递选项。 例如，您可以指定要使用Autoprefixer的浏览器列表，如下所示：

processors: [
require('autoprefixer')({browsers: ['last 1 version']}),
require('cssnext')(),
require('precss')()
]

分享你的项目

PostCSS的优点在于可以使用任何插件组合进行配置。 但是，这带来的挑战是确保希望在项目上工作的其他人具有相同的PostCSS插件设置。 多亏了npm ，这个挑战可以通过其依赖管理系统来处理。

因为每次将插件安装到项目中时都使用--save-dev标志，所以它将作为dev依赖项添加到“ project.json”文件中。 这意味着，如果您想与其他人共享您的项目，他们可以在与他们共享的软件包上运行命令npm install ，并自动安装所有相同的插件。

要了解有关依赖管理如何与NPM一起工作的更多信息，请查看教程Web设计命令行：驯服第三者软件包 。

回顾一下

总结以上所有内容：

• 创建一个安装了Grunt并在其中包含Gruntfile的npm项目
• 安装grunt-postcss插件
• 设置您的Gruntfile shell，使用grunt.loadNpmTasks('grunt-postcss');加载grunt-postcss grunt.loadNpmTasks('grunt-postcss');
• 创建一个艰巨的任务来编译CSS
• 在任务中，设置一个包含processors数组的options对象
• 同样在任务中，设置一个dist对象，指定您的源文件和编译文件的目标

从那里开始，您可以按照相同的基本步骤在项目中启用任何PostCSS插件：

• 使用以下命令将插件安装到项目中
  npm install <plugin_name> --save-dev
• 使用require（）函数将该变量名添加到preprocessors数组中
  require('<plugin_name>')() 。

查看Github仓库中的入门文件和完整示例。

下一步：探索插件

现在，您知道如何使用Gulp或Grunt来将PostCSS与您选择的任何插件一起使用。 接下来，您需要探索PostCSS插件生态系统并找到适合您要创建的项目的完美插件的方法。

在下一个教程中，我们将详细介绍如何实现此目的。 “ 快速入门指南：探索插件 ”。

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-grunt-setup--cms-24545

grunt 入门