Gulp 基础介绍 gulp-postcss 与 autoprefixer DAY81

这里要来介绍如何优化 css

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

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

为了省时

我们可以加入 gulp-postcss 与 autoprefixer

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

第一种:

1. npm install gulp-postcss postcss --save
2. npm install autofixer --save
3. 加入

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

4. 由於 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 只是其中一个

7. 这样就完成啦 我们可以输入 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())

就大功告成啦~~

那今天的介绍就到这里

若有任何问题 或 内容有误

都可以跟我说唷