PostCSS - 优雅的后处理器

最新推荐文章于 2024-11-16 22:42:03 发布

转载最新推荐文章于 2024-11-16 22:42:03 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/bzhang/blog/683837

文章标签：

#json

本文介绍了一种利用Gulp和PostCSS插件（如CSSNext、Autoprefixer和CSSGrace）来构建和兼容不同浏览器的CSS工作流程。通过具体的`package.json`和`gulpfile.js`文件配置示例，展示了如何实现CSS的自动化处理。

为什么80%的码农都做不了架构师？>>>

构建工具为 Gulp

基于 PostCSS

PostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器

PostCSS插件 Autoprefixer 为CSS补全浏览器前缀

PostCSS插件 CSS Grace 让CSS兼容旧版IE

package.json

{
  "name": "postcss usage",
  "version": "1.0.0",
  "description": "postcss cssnext",
  "main": "gulpfile.js",
  "dependencies": {
    "autoprefixer": "^5.2.0",
    "autoprefixer-core": "^5.2.1",
    "cssgrace": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.3"
  },
  "devDependencies": {
    "autoprefixer": "^5.2.0",
    "autoprefixer-core": "^5.2.1",
    "cssgrace": "^2.0.2",
    "cssnext": "^1.8.4",
    "gulp-postcss": "^6.0.0",
    "postcss": "^4.1.16"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "postcss",
    "gulp"
  ],
  "author": "givebest",
  "license": "ISC"
}

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssgrace  = require('cssgrace');
var cssnext  = require('cssnext');
gulp.task('css', function () {
  var processors = [
    autoprefixer({browsers: ['last 3 version'],
      cascade: false,
      remove: false
    }),
    cssnext(),
    cssgrace
  ];
  return gulp.src('./src/css/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dist'));
});
gulp.task('watch', function(){
  gulp.watch('./src/css/*.css', ['css']);
});
gulp.task('default', ['watch', 'css']);