PostCSS深入学习:Grunt配置

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一篇文章中我们一起了解了如何在项目中使用Gulp来配置PostCSS。在这篇文章中,我们将一起探讨如何在项目中使用Grunt来配置PostCSS。

注意:如果你从示使用过命令行来配置Grunt,我建议你在阅读本教程之前先阅读我之前写的这个系列教程:《The Command Line for Web Design

先决条件

在使用Grunt来配置PostCSS之前,我们假设你的本地电脑已经安装了这些应用程序:

  • Node.js
  • NPM
  • Git

如查你不能确认是否安装了这些,请跟随这篇文章了解相关的知识。

请确保你已装安装了全局的Grunt CLI,并且了解如何使用Grunt完成自动化任务部署相关的操作。此外,按照教程,使用Grunt配置项目。继续后面的内容之前,确认你有一个项目文件夹,而且里面包含下面这些文件:

  • gruntfile.js
  • package.json
  • 在项目目录下运行grunt install,根据依赖关系,将相关插件安装到node_modules

PostCSS和Grunt

在项目的根目录下创建两个文件夹,一个命名为src,另一个命名为dest。并且将CSS的源文件放在src文件夹下,并且PostCSS的编译出来的CSS文件将会放置在dest文件夹下。

接下来要做的事情,就是在你的项目中安装PostCSS版本的Grunt插件grunt-postcss

打开终端命令,并进入项目根目,输入下面的命令:

npm install grunt-postcss --save-dev

这个时候,项目文件结构类似下图所示的样子:

Grunt PostCSS

编辑器打开gruntfile.js文件,并且添加Gruntfile所需的基本代码:

module.exports = function(grunt) {

};

通过grunt.loadNpmTasks()函数加载grunt-postcss插件:

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

现在可以开始配置Grunt任务,好让PostCSS跑起来。首先像下面一样添加grunt.initConfig()函数:

module.exports = function(grunt) {
  grunt.initConfig({

  });
  grunt.loadNpmTasks('grunt-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的源文件和PostCSS编译后的CSS文件。

现在我们在src文件夹下创建一个CSS文件style.css,并且添加测试代码,如下所示:

.test {
    background: black;
}

接下来更新dist对象,指定CSS的源文件地址为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.

在你项目的dest文件夹下应该可以找到一个新的style.css文件,而且文件中包含的样式代码和src文件夹下的style.css一样。

添加PostCSS插件

现在我们添加需要的PostCSS插件:Autoprefixer(处理浏览器私有前缀),cssnext(使用CSS未来的语法),precss(像Sass的函数)。

运行下面的命令,将插件安装到你的项目:

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

注:安装cssnextprecss时需要一段时间,因为他们包括了多个插件。

然后将这三个插件添加到processors数组中,更新后的数组如下:

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

继续在源style.css文件中添加一些测试代码用来检测新设置的PostCSS插件是否能预期工作。

删除前面的代码,添加下面的新代码:

/* 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命令,编译后的结果会放在deststyle.css中,在编译后的文件中将会看到下面这样的新代码:

/* 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给需要的属性添加了浏览器的私有前缀,第二个任务cssnext将颜色转换成rgba(),第三部分PreCSS检查了@if @else,编译符合需求的代码。

设置插件选项

请注意,如果你想要为一个插件配置选项,可以在require()函数后面添加第二个(),并在这里设置选项参数。比如,你可以给Autoprefixer指定浏览器版本,像下面这样设置:

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

分享你的项目

PostCSS最美之处就是可以将插件根据自己的需要做任意的组合。这对于确保其他的人希望在一个项目中有相同的PostCSS插件设置时,就提出了一个很大的挑战。这得感谢npm,我们可以通过他来管理插件依赖关系。

因为我们安装插件到项目中使用了--save-dev标志,在安装时会自动将依赖文件写入项目的package.json文件中。这意味着如果你想和他人分享你的项目,他们可能在命令终端运行npm install命令,就可以自动安装分享的插件。

有关于更多关于npm依赖关系管理的信息,你可以点击这里进行更多的了解。

总结一下

根据上面介绍的内容,简单总结一下:

  • 通过npm创建项目,并且将grunt安装到gruntfile文件
  • 安装grunt-postcss插件
  • 设置gruntfile.js文件,通过grunt.loadNpmTasks('grunt-postcss)加载grunt-postcss
  • 创建一个任务,编译你的CSS
  • 在任务中options对象中嵌套一个processors数组
  • dist中指定CSS源文件和编译出的文件路径

你可以根据上面的教程介绍,遵循相同的步骤,你可以将PostCSS任何插件安装到项目中。

  • 通过npm install <plugin_name> --save-dev 命令将插件安装到你的项目中
  • 使用require():require('<plugin_name>')preprocessors数组中添加插件变量名

如果你感兴趣,可以点击这里将示例所有代码下载下来。

下一节:管理插件

现在你知道如何使用Gulp或Grunt在项目中配置你选择的任何想要的PostCSS任件。接下来你需要做的一件事情是在PostCSS插件的生态系统中找到适合你项目的插件。在接一下来的一篇文章中,我们将一起探讨这方面的相关知识。

本文根据@Kezz Bracey的《PostCSS Quickstart Guide: Grunt Setup》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-grunt-setup--cms-24545

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/PostCSS/postcss-quickstart-guide-grunt-setup.htmlnike free run 5.0 soccer

如需转载,烦请注明出处:https://www.w3cplus.com/PostCSS/postcss-quickstart-guide-grunt-setup.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部