PostCSS學習之路 --- 環境安裝

1、準備工做

在項目中新建一個名爲PostCSS的文件夾，在文件目錄下新建一個package.json(用來保存安裝插件信息)，gulpfle.js(用來編寫命令)，dest文件(用來存放處理後的css文件)以及src文件（用來存放原始css文件）

2、安裝gulp以及postcss

一、命令符黑窗口進入根目錄

二、安裝gulp，在命令行裏輸入npm install gulp --save-dev

安裝成功之後，在package.json裏面會出現這樣的安裝信息：

在根目錄下會出現node_modules的文件目錄

三、安裝postcss，在命令行裏輸入：npm install postcss autoprefixer cssnext precss --save-dev

安裝成功，在package.json裏面的信息會變成：

注：若是上面命令沒法正常安裝，則輸入npm install --save-dev gulp-postcss

3、進行gulpfle.js的配置

一、建立gulp和gulp-postcss變量

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

二、添加代碼

gulp.task('css', function () {
    var processors = [
    ];
    return gulp.src('./src/*.css') 
        .pipe(postcss(processors)) 
        .pipe(gulp.dest('./dest'));
});

在第一行，設置了一個任務名叫css。這個任務將會執行一個函數，同時在這個函數中建立了一個名爲processors的數組。如今這個數組爲空，這裏將插入咱們想使用的PostCSS插件。

在processors數組後面，咱們指定了須要處理的目標文件，即src目錄中的任何CSS文件。

這裏面使用了兩個.pipe()函數，設置postcss()執行PostCSS，而且給postcss()傳遞processors參數，後面會告訴PostCSS要使用哪一個插件。

接下來的第二個.pipe()函數，指定結過PostCSS處理後的CSS放置在dest文件夾中。

4、測試編譯

將原始的.css文件放在src文件夾中，在命令終端的項目目錄下輸入命令：gulp css ，dest文件夾中就會出現相對應的編譯後的.css文件。

 

 

添加其餘變量的gulpfile配置：

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

var autoprefixer = require('autoprefixer');
var color_rgba_fallback = require('postcss-color-rgba-fallback');
var opacity = require('postcss-opacity');
var pseudoelements = require('postcss-pseudoelements');
var vmin = require('postcss-vmin');
var pixrem = require('pixrem');
var will_change = require('postcss-will-change');

gulp.task('css', function () {
    var processors = [
        will_change,
        autoprefixer({
            browsers: ['> 1%','last 2 versions', 'ie >=8', 'Firefox > 20', 'Chrome > 31']
        }),
        color_rgba_fallback,
        opacity,
        pseudoelements,
        vmin,
        pixrem
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

 

 【PostCSS學習教程】     【gulp、PostCSS安裝教程】