gulp开发工具之postcss

参考文章：http://www.cnblogs.com/givebest/p/4771154.html

package.json

 1 {
 2   "name": "postcss",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "gulpfile.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "",
10   "license": "ISC",
11   "devDependencies": {
12     "autoprefixer": "^6.3.6",
13     "autoprefixer-core": "^6.0.1",
14     "cssgrace": "^3.0.0",
15     "cssnext": "^1.8.4",
16     "gulp": "^3.9.1",
17     "gulp-less": "^3.0.5",
18     "gulp-postcss": "^6.1.1"
19   }
20 }

gulpfile.js

 1 // JavaScript Document
 2 /**
 3 *PostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器
 4 *PostCSS插件 Autoprefixer 为CSS补全浏览器前缀
 5 *PostCSS插件 CSS Grace 让CSS兼容旧版IE
 6 */
 7 
 8 var gulp = require('gulp');
 9 var postcss = require('gulp-postcss');
10 var autoprefixer = require('autoprefixer');
11 var cssgrace  = require('cssgrace');
12 var cssnext  = require('cssnext');
13 gulp.task('css', function () {
14   var processors = [
15     autoprefixer({browsers: ['last 3 version'],
16       cascade: false,
17       remove: false
18     }),
19     cssnext(),
20     cssgrace
21   ];
22   return gulp.src('./src/css/*.css')
23     .pipe(postcss(processors))
24     .pipe(gulp.dest('./dist'));
25 });
26 gulp.task('watch', function(){
27   gulp.watch('./src/css/*.css', ['css']);
28 });
29 gulp.task('default', ['watch', 'css']);

./src/css/index.css

@charset "UTF-8";
:root {
    --mainColor: #333;
    --fontSize: 1.1rem;
}
body {
    color: var(--mainColor);
    font-size: calc(var(--fontSize)*2);
}
.display-flex {
    display: flex;
}
.bg {
    background-color: rgba(255,255,255,0.3);
}
.display-block {
    display: inline-block;
}

postcss之后的css文件./dist/css/index.css

@charset "UTF-8";
body {
    color: #333;
    font-size: 35px;
    font-size: 2.2rem;
}
.display-flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}
.bg {
    background-color: rgba(255,255,255,0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4cffffff', endColorstr='#4cffffff');
}
:root .bg{
    filter: none\9;
}
.display-block {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

 

posted @ 2016-05-03 15:09  极·简  Views(363)  Comments(0)  Edit  收藏  举报