postCss的学习

学习css预处理器

１、准备工作。安装node.js。

2、window+r 运行命令行，输入’cmd‘，打开命令行。

进入项目工程目录盘，举例：我的项目放在E 盘mywork文件夹里。在命令行输入e:回车进入e盘目录。再输入cd mywork，进入到项目目录。

3、在命令行输入　npm  install gulp -i  

4、安装"gulp-postcss"插件，在命令行输入　npm install gulp-postcss -i  回车开始安装，完成如下图

5、在命令行安插postcss插件。输入如下内容回车。

npm install postcss-alias postcss-crip postcss-font-magician postcss-triangle postcss-circle postcss-all-link-colors postcss-center postcss-clearfix postcss-position postcss-size postcss-verthorz postcss-color-short --save-dev

安装完毕如下图

6、需要建立一个“package.json”文件。请在命令行输入“npm init” 后回车，不停的按回车键开始创建。完成后如下图：

7、在项目的根目录，手动创建一个“gulpfile.js”文件。内容如下图：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var alias = require('postcss-alias');
var crip = require('postcss-crip'); 
var magician = require('postcss-font-magician');
var triangle = require('postcss-triangle');
var circle = require('postcss-circle');
var linkColors = require('postcss-all-link-colors'); 
var center = require('postcss-center'); 
var clearfix = require('postcss-clearfix'); 
var position = require('postcss-position'); 
var size = require('postcss-size');
var verthorz = require('postcss-verthorz');
var colorShort = require('postcss-color-short');



gulp.task('css', function () {
 var processors = [ alias, crip, magician, triangle, circle, linkColors, center, clearfix, position, size, verthorz, colorShort ]
  return gulp.src('./src/**/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dist'));
});

8、以上都完成后，在命令行输入gulp css。ok,你要的css生成了。