gulp教程之gulp-autoprefixer<轉>

時間 2019-11-19

標籤 gulp 教程 autoprefixer 欄目 JavaScript 简体版

原文原文鏈接

簡介：

使用gulp-autoprefixer根據設置瀏覽器版本自動處理瀏覽器前綴。使用她咱們能夠很瀟灑地寫代碼，沒必要考慮各瀏覽器兼容前綴。【特別是開發移動端頁面時，就能充分體現它的優點。例如兼容性不太好的flex佈局。】css

一、安裝nodejs/全局安裝gulp/項目安裝gulp/建立package.json和gulpfile.js文件

1.一、gulp基本使用還未掌握？請參看： gulp詳細入門教程node

1.二、本示例目錄結構以下：ios

二、本地安裝gulp-autoprefixer

2.一、github：https://github.com/sindresorhus/gulp-autoprefixergit

2.二、安裝：命令提示符執行 cnpm install gulp-autoprefixer --save-devgithub

2.三、注意：沒有安裝cnpm請使用 npm install gulp-autoprefixer --save-dev。什麼是cnpm，如何安裝？web

2.四、說明：--save-dev 保存配置信息至 package.json 的 devDependencies 節點。爲何要保存至package.json？npm

三、配置gulpfile.js

3.一、基本使用json

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');
 
gulp.task('testAutoFx', function () {
    gulp.src('src/css/index.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化屬性值 默認：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉沒必要要的前綴 默認：true
        }))
        .pipe(gulp.dest('dist/css'));
});