PostCSS自學筆記（一）【安裝使用篇】

時間 2019-11-06

標籤 postcss 自學筆記安裝使用篇简体版

原文原文鏈接

PostCSS介紹

PostCSS是一個利用JS插件來對CSS進行轉換的工具，這些插件很是強大，強大到無所不能。其中，Autoprefixer就是衆多PostCSS插件中最流行的一個。javascript

截至目前（2017年7月）PostCSS已經有超過200個插件，你能夠插件列表查找有沒有你所須要的插件。若是你想本身寫個插件，聽說這是一個不錯的主意，並且很是簡單（前提掌握node.js，不過我還沒學會呢），你能夠試着搞點事。css

看到這裏，你可能沒有發現它的強大之處，甚至我本身都沒有被我翻譯的這段官方文字所打動。~~由於沒(wǒ)有(yě)對(bù)比(tài)就(huì)沒(yòng)有(zhè)傷(wán)害(yì)。~~好了，是時候啓動裝逼模式了。html

維基百科，阿里巴巴，谷歌，Wordpress，Twitter等網站均有使用，大佬們都在用你有什麼理由不跟上步伐。java

再來看看這張PostCSS下載數量的npm-stat統計表（數據證實一切）：node

學習PostCSS以前須要瞭解一些事情：webpack

PostCSS插件的處理方式相似那些CSS預處理器，而非預處理器和後處理器（PostCSS is Not a Pre-processor and Not a Post-processor either）
PostCSS is Not 「Future Syntax」（不是新式/將來語法？不知道怎麼翻譯）
PostCSS自己並不是整理或優化CSS的工具
PostCSS能夠完成不少意想不到的事情，例如用postcss-rtl惡搞一下?

那麼它還有一些特性，例如建立了一個插件功能極強的生態系統，具備模塊化須要什麼用什麼（precss就是一個集成了相似SASS不少方法的包），相比其餘的CSS預處理器它的優點主要體如今如下幾個方面：git

擁有極高的處理性能（3倍以上的處理速度）
你既能夠寫正常的CSS，也能夠結合LESS或者SASS一塊兒編寫
對Source Map支持更好
他的插件真的太多太強大太便利了

其餘對比SASS和LESS的區別在於他們內置了大量的方法，而也許你只須要用到幾個變量而已，大材小用。而PostCSS則可制定我的需求的一套解決方案（僅安裝須要的插件）。這也就是他高性能的主要緣由。幾乎SASS和LESS有的功能全都有！github

總之好處太多了。這裏就不一一列舉了。火燒眉毛的你已經等不及安裝使用了吧。web

PostCSS安裝及使用

PostCSS通常是結合自動化工具使用，若是要單獨使用能夠安裝PostCSS CLI，這裏我先對PostCSS CLI的安裝使用講解下。Windows下安裝（文中操做所有基於WINDOWS環境）：npm

~~npm i -g postcss-cli~~或者npm i --save-dev postcss-cli

CLI是否建議全局安裝?（這樣包括其對應的插件都要全局了？若是不全局就失去了CLI的意義了？）。全局安裝完成後，試着輸入PostCSS，出現如下結果，說明安裝OK

不過我我的習慣僅安裝在項目中，因而我沒有選擇安裝CLI，而是直接在項目中安裝PostCSS，npm i --save-dev postcss，我這裏有個例子能夠看看

接下來，咱們還作不了什麼，咱們須要安裝一些插件配合PostCSS，例如，我如今安裝一個autoprefixer

npm install --save-dev autoprefixer，並參考例子中的style01.css，我要經過PostCSS對它進行處理。這裏兩個方法：

經過cd node_modules/.bin/進入node_modules/.bin/目錄內再執行
postcss ../../src/style01.css -o ../../dist/output_style01.css -u autoprefixer
經過修改package.json中的scripts，增長一條postcss命令
"postcss:style01": "postcss ./src/style01.css -o ./dist/output_style01.css -u autoprefixer"

而後再回到根目錄（postcss-study目錄）下執行

npm run postcss:style01

二者效果相同，固然我傾向於後者啦。完成後一條鮮亮的綠色的讓人安全感十分強列的提示語出現了√ Finished ...前面還有個sweet的勾勾，請看編譯後的output_style01.css聰明的你必定能觸類旁通的。作出更多驚奇的事情的~

另外咱們能夠一樣的採用Parser插件來編譯樣式文件（固然我其實是不會用sugarss的，若是你習慣用sass請安裝postcss-scss），個人DEMO裏面請參考style02.sss文件的編譯。這裏就很少說了。

還有一種預先寫好配置文件，這個就稍微先進一些，也不會看起來很亂。咱們建立一個postcss.config.js文件：
module.exports = {
  parser: 'sugarss',
  plugins: [
    require('autoprefixer')
  ]
}
不過這種通過我我的測試，僅適用於全局安裝了PostCSS-CLI和sugarss的狀況下再該配置文件目錄下執行postcss ./src/style02.sss -o ./dist/test.css命令就行了。這裏我的不是很推薦。關於CLI下的一些方法暫時就很少說了，若有錯誤請各位大佬指正~?

PostCSS主要插件說明和介紹

官方對於插件根據用途作了分類，主要有如下幾個類別：

解決全局CSS問題

使用將來的CSS語法

編寫可讀性更好的CSS

用於圖片和字體

CSS語法檢查

其餘

以上內容主要是用來熟悉一下PostCSS的。接下來講點實際的，如何利用PostCSS結合自動化工做在項目中使用。

PostCSS結合Webpack應用

關於webpack基礎配置的相關內容這裏就很少說了~前面已有大神寫了有興趣能夠膜拜一下。

咱們先來建立一個項目目錄，結構以下：（style0*.css做爲我測試的文件，後面可能增長）

|– dist
|– src
| |– images
| | |– postcss-00.png
| | |– postcss-01.png
| – index.js
| – index.html
| – style04.sss
|– postcss.config.js
|– webpack.config.js
|– package.json

接下來安裝依賴包：

npm i -D postcss-loader style-loader css-loader webpack webpack-dev-server

而後修改已下文件，請仔細閱讀?

package.json

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
},

先來個簡單的試試：

webpack.config.js

var path = require('path');
module.exports = {
  entry: {
    index: path.resolve(__dirname, 'src/index.js')
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.sss$/,
      exclude: /node_modules/,
      use: [{
          loader: 'style-loader',
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
          }
        },
        {
          loader: 'postcss-loader'
        }
      ]
    }]
  },
  devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    hot: true,
    host: '0.0.0.0',
    disableHostCheck: true
  }
}

postcss.config.js

module.exports = {
  parser: 'sugarss',
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

讀完了應該發現此刻運行確定會出錯的~由於尚未安裝其餘跟PostCSS相關的插件呢，因而繼續安裝：

npm i -D sugarss precss autoprefixer

（插件簡單介紹，sugarss是比較特別的css語法，我還沒有了解到這樣寫的好處，僅供你們學習參考。precss功能就很強悍了，相似sass的一些功能。autoprefixer就不用多說啦！）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>這是一個用於PostCSS測試的頁面</title>
</head>
<body>
  <div class="test">
    <p class="multiline">this is a container</p>
  </div>
  <script src="../dist/index.js"></script>
</body>
</html>

style04.sss

$blue: #056ef0

.test 
  box-sizing: border-box
  padding: 50px
  border: 10px solid $blue
  width: 200px
  height: 200px

.multiline,
.selector
  box-shadow: 1px 0 9px rgba(0, 0, 0, .4),
              1px 0 3px rgba(0, 0, 0, .6)

基本工做大功告成，開兩個終端跑兩條命令試試看。

npm run start

npm run build

一切運行OK，接下來訪問http://localhost:9000/src/，看起來也都還不錯。固然寫到這裏只是介紹瞭如何結合webpack使用PostCSS。而實際項目應用中，我目前還在探索更多實用的插件，構建一個基本能夠替代SASS，LESS等

參考文獻：

webpack官方說明：postcss-loader

PostCSS結合Gulp應用

Gulp我用的不多，不是很熟悉，這裏結合官方一些和本身嘗試的DEMO進行說明。

我基於以前的代碼來繼續補充內容。

安裝Gulp相關的包：

npm run i -D gulp gulp-postcss gulp-sourcemaps

增長Gulp配置文件gulpfile.js，頁面index2.html，樣式style05.css，修改package.json的script以下：

gulpfile.js

var postcss = require('gulp-postcss');
var gulp = require('gulp');

gulp.task('css', function () {
  var postcss = require('gulp-postcss');
  var sourcemaps = require('gulp-sourcemaps');

  return gulp.src('src/style05.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([require('precss'), require('autoprefixer')]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/'));
});

index2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>這是一個用於PostCSS測試的頁面(gulp)</title>
  <link href="../dist/style05.css" rel="stylesheet">
</head>
<body>
  <div class="test">
    <p class="box">this is a box</p>
    <p class="box">this is another box</p>
  </div>
</body>
</html>

style05.css

/* gulp下測試 */
$blue: #056ef0;
.test {
  display: flex;
  color: $blue;
  .box {
    flex: 1;
  }
}

package.json的scripts部分以下

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack",
  "gulp": "gulp css"
},

一切就緒後，咱們來執行偉大的命令了：

npm run gulp

個人電腦等待了約1.26s~1.29s，提示finish啦~

和以前相同，我這裏依舊採用了webpack-dev-server啓動的服務器（固然這個又依賴webpack配置，除非你將配置直接寫入package.json內），那麼你固然也可使用其餘本身喜歡的服務器（例如http-server），咱們依舊先啓動服務器npm run start，而後訪問本地http://localhost:9000/src/index2.html就能夠看到效果了。或者你也能夠直接去看dist目錄內生成出來的style05.css文件，一切都是那麼美好~

PostCSS學習心得及總結

由於此次學習，純粹是根據「教科書」來學，來說解的，所以也就沒有什麼真正的精髓，我也是纔開始接觸PostCSS，文中有錯誤之處還請指正。我但願之後在項目中儘量的用好PostCSS，再次帶來一篇簡短而有力的文章分享給你們。因時間和精力有限但願這篇文章能給你們帶來些幫助。目前能想到的，還有一些將來須要補充的內容包括：

sourcemaps
是否有移動端基於PostCSS的自適應解決方案
本身寫個可能會比較實用的插件
結合postcss-sass究竟有什麼好處
postcss對圖片和字體等資源文件處理

暫時想到這些，若是你還有一些想到的歡迎在下面留言哦?

其餘參考文獻彙總：
PostCSS Deep Dive（強烈推薦！我看完了才發現有部分譯文：PostCSS深刻學習）

PostCSS深刻學習: PostCSS和Sass、Stylus或LESS一塊兒使用

PostCSS 是個什麼鬼東西？

PostCSS一種更優雅、更簡單的書寫CSS方式

PostCSS及其經常使用插件介紹

PostCSS – A Comprehensive Introduction

http://www.cnblogs.com/terrylin/p/5229169.html

至關不錯的PPT形式

https://ai.github.io/about-postcss/en/

postcss的優點

From Sass to PostCSS

PostCSS – Sass Killer or Preprocessing Pretender?