Gulp 基础介绍 gulp-postcss 与 autoprefixer DAY81

这里要来介绍如何优化 css

有时候我们因为要加前缀词(有的旧浏览器不支援，所以需要加)

但这会浪费我们大量的时间在查询资料

为了省时

我们可以加入 gulp-postcss 与 autoprefixer

那我们就要开始介绍 如何安装与使用
这里我们会介绍3种方式

第一种:

npm install gulp-postcss postcss --savenpm install autofixer --save加入

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

由于 autoprefixer 近期设定浏览器的规则有改
我们必须先新增一个 .browserslistrc 的档案
并在里面新增

last 5 version> 1%IE 10 # sorry

浏览器规则

在sass任务下 新增一个 plugin

gulp.task('sass', function () {    var plugins = [        autoprefixer(),    ];    return gulp.src('./source/scss/**/*.scss')    .pipe(plumber())    .pipe(sass().on('error', sass.logError))    .pipe(gulp.dest('./public/css'));});

由于
.pipe(sass().on('error', sass.logError)) 此时已经编译完成
所以在他后面
可强化它的css(ex:前缀词)

所以加入
.pipe(postcss(plugins))
这里要注意
postcss 可以载入大量插件，autoprefixer 只是其中一个

这样就完成啦 我们可以输入 gulp 看看
会发现
css 已经有加入前缀词了

body {  background-color: blue; }.card {  -webkit-transform: rotate(120);      -ms-transform: rotate(120);          transform: rotate(120); }

附上此方法的程式码

gulpfile档

var gulp = require('gulp');var jade = require('gulp-jade');var sass = require('gulp-sass');var plumber = require('gulp-plumber');var postcss = require('gulp-postcss');var autoprefixer = require('autoprefixer');gulp.task('jade', function() {    gulp.src('./source/**/*.jade')    .pipe(plumber())    .pipe(jade({        pretty: true    }))    .pipe(gulp.dest('./public/'))});gulp.task('sass', function () {    var plugins = [        autoprefixer(),    ];    return gulp.src('./source/scss/**/*.scss')    .pipe(plumber())    .pipe(sass().on('error', sass.logError))    .pipe(postcss(plugins))    .pipe(gulp.dest('./public/css'));});gulp.task('watch', function () {    gulp.watch('./source/scss/**/*.scss', ['sass']);});gulp.task('default',['jade','sass','watch']);

.browserslitrc (此为浏览器规则 可自行设定)

last 1 version> 5%

---

第二种方法

我们不新增 .browserslitr

直接在package.json档 输入
"browserslist": [
"last 1 version",
"> 5%"
]

移除

var plugins = [        autoprefixer(),    ];

并修改

  .pipe(postcss(plugins))

为

 .pipe(postcss([autoprefixer()]))

最后输入 gulp
结果会是一样的

---

第三种

如果不想要安装 gulp-postcss、autoprefixer

也可以改用别人整合好的套件

输入 npm install --save gulp-autoprefixer

引入 const autoprefixer = require('gulp-autoprefixer');

并加上 .pipe(autoprefixer())

就大功告成啦~~

那今天的介绍就到这里

若有任何问题 或 内容有误

都可以跟我说唷