聊聊PostCSS

> 初探PostCSS
>     为什么是PostCSS
> 如何使用PostCSS
>     NPM
>     Grunt
>     Gulp
>     Webpack
>     Parcel
> 关于PostCSS入门的结论

  无论是 WEB 设计师或者是前端开发者，都少不了会接触CSS。更多的时间我们是通过工具来实现CSS开发的，这些工具使我们的开发过程更加的简单，快速，灵活。PostCSS就是这类型工具之一，或许你早就听说过了，或许你跃跃欲试想使用这个工具进行开发。但是你却不知道怎么开始，在这篇文章里我们会介绍关于PostCSS是如何使用的。闲言不多叙，进入正题。

初探PostCSS

  现在从哪里开始呢？首先从一点点理论谈起。什么是PostCSS ? 正如我在一开始提到的那样，PostCSS是一个使CSS更容易，更灵活，更快速工作的工具。 有些人甚至不敢说PostCSS是一种重新发明CSS的方法。 我不知道这是否属实。 还有其他一些工具，如Sass，LESS和Stylus，它们也在重塑CSS以及我们的工作方式方面做得很好。 但是，有些特点会使PostCSS变得不同，几乎可以将它归入自己的类别。

  那么，我们应该提前明确一点。 PostCSS 不是 一个“真正的”预处理器。 PostCSS相当于一个CSS解析器，框架或API，它允许我们使用可以完成各种任务的插件。 本身没有任何插件，它实际上什么也不做，它不以任何方式转换CSS。 我们可以安装它，通过它解析CSS，结果将与我们使用的原始CSS相同。 当然，我们也可以对预处理器进行说明。 我们可以采用原始CSS，使用Sass或LESS，并且结果将再次相同。

  两者之间有个区别，Sass和LESS都已经包含了所有的功能，如mixin，扩展，循环，条件等等。 PostCSS 并不是这样。 为了更改原始 CSS，我们必须添加至少一个插件。 例如，我们可以将PostCSS视为管理器。 它管理插件并为它们提供数据（将 CSS 转换为抽象语法树（ AST ））。 正是这些插件完成所有繁重的工作。 管理器需要开发人员的配合才能完成了工作。 没有人配合，管理器是无法完成的。 PostCSS就可以单纯的理解成一个 CSS 管理器。

为什么选择 PostCSS？

  那么，为什么老夫要推荐大家试一试PostCSS呢？ 它受到追捧的程度，并不是由于GitHub上的星星数量造成的。 虽然，PostCSS似乎也是这场PK赛的冠军。 不，还有别的。 这是什么？ 为什么这么多人喜欢使用PostCSS？ 那么，不同的人可能会给我们不同的答案。 但是，人们经常喜欢提及至少三种主要优势。

  首先是可扩展性。 PostCSS 是一个丰富的 plugins 和 tools。 每个网页设计人员和开发人员都可以选择和使用任何她想要的插件。当你想用 CSS 更容易地完成你的工作时，你可以安装和使用一个PostCSS插件。 如果不？ 那么，你可以自己写一些小巧的插件，并且发布它。 然后，社区中的其他人可以使用它，也可以改进它。 这是其他预处理器不提供的。 对于其他预处理器，我们通常受限于“标准软件包（standard package）”中的可用内容，并仅使用它。

  PostCSS的第二个优势模块化，这也许是许多开发人员在与其他 CSS 相关工具相比较更喜欢它的原因了。 这是为什么呢？其他预处理器充满了很多有用的东西。 但是，我们可能永远不会真的使用这些功能中的一些。 问题是，我们不能把他们扔进垃圾桶，以尽量减少代码。 就像我们不能添加我们想要使用的新功能一样，我们也不能剥去一些我们不想使用的功能。 再次，我们受限于“标准包”中的可用内容。

  PostCSS是不同的。 正如我已经提到的，PostCSS基本上是一个插件生态系统。 所以，当我们想使用某些功能时，我们会找到提供此功能并安装它的插件。 如果我们不想使用某些功能，我们就可以删除这个插件。 如果我们愿意，我们可以根据需要添加或删除功能或插件（并写入新的）。 PostCSS的第三个也是最后一个优势是尊重W3C标准。 我们可以将它用作polyfill并使用最新的W3C功能。

  这可能要归功于社区不断增长的插件生态系统。 这是许多这些插件在做的事情。 他们的目标是允许我们使用最新的CSS特性，而不用担心我们的项目在我们发布到世界之后无法正常工作。

  还有一件事对以前与其他预处理器一起工作的人来说是有用的。 PostCSS的工作原理与其他预处理器（如Sass，LESS和Stylus）相同。 这意味着，我们可以使用CSS中不可用的功能。 例如，我们可以使用混入，扩展，循环，条件，更好的导入版本，“非本地”变量等等。 结果总是干净而且“浏览器友好”的CSS。 最后，我们可以自定义我们的PostCSS工作流程，这感觉就像使用其他预处理器是一样的。

如何使用PostCSS

  到目前为止，我们至少对PostCSS是什么以及它的一些优势有了一些了解。 接下来的问题是，如何使用它？ 我们需要做些什么才能体验到使用PostCSS的乐趣？ 通常情况下，这取决于。 这取决于我们在工作流程中使用哪些Task runner 或 bundler。 无论您的任务运行者还是选择的打包者是Gulp，Webpack，Parcel，Grunt 或者您想使用 npm Scripts，都有一个解决方案

Npm

  让我们以最简单的方式来使用PostCSS。 而且，这是通过命令行。 这不需要安装任何 runner 或打包器（bundler） 。 我们需要的只是npm和node.js。 如果您没有这些，请从官方网站下载适用于您的特定计算机和操作系统的node.js安装程序并进行安装。 这也将在您的计算机上安装npm。然后，我们可以安装PostCSS。 既然我们想通过命令行直接使用PostCSS，我们需要安装 postcss-cli 。 请记住，它必须在全局范围安装。

npm install -g postcss-cli

  从现在开始，我们可以随时从我们的命令行中使用PostCSS。例如，假设我们希望将"src /css"目录中的 style.css 文件解析为 PostCSS，并将结果另存为 "dist/css" 中的新文件（styles.css）。 因为，我们没有安装和使用任何插件，所以输出 CSS 将与输入相同。 使用它的最简单方法是使用以下命令。

 //template: postcss [some-options] --output output-file input-file
 postcss --output src/css/styles.css dist/css/styles.css

  假设我们想要使用一些插件，比如 cssnext 用于前缀，cssnano 用于 minifaction。 这意味着我们需要安装 postcss-cssnext 和 cssnano。 我建议你安装这些软件包作为每个项目的本地依赖项，使用

npm install --save-dev postcss-cssnext cssnano

  但是，如果您想要在全局安装它们，请随时这样做。 另外，如果您更喜欢使用 yarn 在项目中依赖添加 postcss-cssnext ，请随时使用

yarn add -D postcss-cssnext cssnano。

  现在我们可以使用下面的命令。 这将需要我们把CSS文件styles.css ，自动预处理（autoprefix）和缩小（cssnano） 。

postcss --use postcss-cssnext --use cssnano --output src/css/styles.css dist/css/styles.css

  我们也可以使用这些标志的较短版本并写入。 您可以在其 GitHub 存储库中找到有关ostcss-cli 的所有标志，命令如下。

postcss --use postcss-cssnext -u cssnano -o src/css/styles.css dist/css/styles.css

Gulp

  接下来，我们来谈谈我最喜欢的 Gulp 的 Task runner。 如果你之前使用过这个Gulp，你就知道它的配置非常简单快捷。 而且，如果你对这个Task runner 没有任何经验，但你很好奇，让我给你两个资源，你可以稍后探讨。 首先是官方网站和文档。 这将为您提供足够的信息来了解Gulp是什么以及它是如何工作的。 然后，在我的博客上看看Gulp for Web Designers教程。 所以你可以学习如何使用它并立即开始使用它。 现在到配置。

  让我们创建一个最小的功能性 Gulp 配置。 我们将再次使用 cssnano 和 postcss-next 插件。 我们还需要添加gulp-postcss插件。 这个插件将帮助我们通过我们想要使用的插件来管理CSS。 所以，npm install --save-dev gulp-postcss postcss-cssnext cssnano。 在转到下一步之前，请确保您的机器上已安装Gulp。 如果没有，请先运行npm install -g gulp。 然后，在你的gulpfile.js中添加以下行。

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const cssnano = require('cssnano')
const cssnext = require('postcss-cssnext')

// A simple 'css' task to transform CSS
gulp.task('css', function() {
  return gulp.src('src/css/styles.css')
    //通过PostCSS管理样式并使用特定的插件。
    .pipe(postcss([
      cssnano(),
      cssNext()
    ]))
    // 保存样式文件到 文件夹 dist 中。
    .pipe(gulp.dest('dist'))
})

现在，我们通过gulp css命令展示了真正的技术（）。

Grunt

接下来是Grunt。 我不得不承认，我只使用过这个Task runner 一次。 而且，这只是因为Grunt已经在我正在研究的项目中使用过了，我不想重写项目的设置。 然而，Grunt 仍然受到一大群人的使用，尽管它的人气正在下降。 无论如何，为了在Grunt中使用PostCSS，我们需要安装grunt-postcss。 而且，我们想要使用的插件。 和Gulp一样，确保你的机器上装有Grunt。 如果没有，运行npm install -g grunt。 然后，将以下代码添加到您的Gruntfile.js。

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    styles: {
      options: {
        processors: [
          require('cssnano')(),
          require('postcss-cssnext')
        ]
      },
      dist: {
        src: ['src/css/styles.css'],
        dest: 'dist/css/styles.css'
      }
    }
  })

  // Load post-css.
  grunt.loadNpmTasks('grunt-postcss')

  // Register default task.
  grunt.registerTask('default', ['styles'])
}

作为最后一步，为了运行这个任务，我们需要使用 grunt 命令。

Webpack
第三个是模块打包器Webpack。 评价Webpack仅用一句“受欢迎”有点太轻描淡写了。 这是许多开发人员的首选工具和最喜欢的选择，尤其是那些从事大型项目的开发人员。 因此，让我们快速浏览一下如何在Webpack中使用PostCSS。 而且，我们再次使用 postcss-cssnext 和 cssnano。 除了这些插件之外，我们还需要安装webpack，css-loader，file-loader（它是一个依赖项），postcss和postcss-loader。 如果您的计算机上全局安装了Webpack依赖项，则在安装过程中跳过它。

npm install --save-dev webpack css-loader file-loader postcss postcss-loader cssnano postcss-cssnext

现在，我们可以为PostCSS创建一小段代码，并将其放入我们的webpack.config.js文件中。

const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    app: './app.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: { importLoaders: 1 },
            },
            'postcss-loader',
          ],
        }),
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist/styles'),
  },
  plugins: [
    new ExtractTextPlugin('[name].bundle.css'),
  ],
  // The rest of your Webpack config
}

在一个单独的文件中为PostCSS和其他支持它的工具进行配置是一种很好且常见的做法。 因此，我们创建另一个名为postcss.config.js的文件，仅用于PostCSS，并将PostCSS所需的文件放在那里。 由于我们只想使用cssnano和postcss-next，所以我们的代码会很短。

module.exports = {
  plugins: {
    'cssnano': {},
    'postcss-cssnext': {}
  }
}

如果全局安装了Webpack，则可以使用webpack命令（以及其他您想使用的选项）。 否则，创建一个名为“webpack”的npm脚本，然后使用npm run webpack。

Parcel

最后的工具，也是像Webpack这样的模块捆绑软件，就是Parcel。 这个捆绑器是相当新的，我曾经有机会尝试使用过它。 然而，它看起来非常有前途，因为它不需要任何配置，并提供与Webpack类似的功能。 为了在Parcel上使用PostCSS，除了安装Parcel和我们的插件外，我们只需要做一件事。npm intall --save-dev parcel-bundler postcss-cssnext cssnano。 我们需要为PostCSS创建配置并使用它来存储我们的PostCSS配置。

这个配置文件可以是.postcssrc，.postcssrc.js或postcss.config.js。 任何选项都可以工作。 唯一的区别是语法。 让我们选择.postcssrc并在JSON中创建一个简单的配置。 现在，我们可以通过选择一个条目文件并使用诸如parcel index.html之类的命令来构建我们的项目来启动它。

{
  "plugins": {
    "cssnano": {}
    "postcss-cssnext": {}
  }
}

关于PostCSS入门的结论

到现在！您已经完成了CSS和PostCSS世界的旅程。我希望你喜欢这篇文章并且学到了一些东西。我也希望，到目前为止，您有足够的信息立即开始使用PostCSS。你现在可能会问的一个问题是，现在呢？那么，您不得不学习和记住PostCSS的官方语法。所以，我的答案将非常简单直接。看看PostCSS可用的插件，挑选你喜欢的，并在你的第一个PostCSS项目中使用它们。

请记住，学习任何东西的最好和最快的方法就是这样做。它也更有趣。所以，不要等待考虑。继续并开始。给自己一些有趣的挑战，看看你将如何处理它。而且，如果您仍然不确定，请查看关于Smashing杂志的广泛教程。您也可以访问PostCSS网站。所以，去享受一些乐趣！

您是否有任何问题，建议，想法，建议或提示要请在评论中分享它。