。相信所有的前端攻城獅。聽到瀏覽器兼容性問題都深有體會。

瀏覽器兼容性問題，無非就是因為瀏覽器內核不同，瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。還有就是根據瀏覽器的版本不同，所兼容的css屬性有所差異。

今天我們借助gulp工具全局跑css文件，實現自動補全，在各個瀏覽器的寫法補全。至于屬性兼容還需要具體情況具體對待。

1：全局安裝gulp .? cmd??? cnpm/npm install gulp -g (cnpm/npm自己選擇，個人建議用cnpm)

2：安裝完成查看是否安裝成功?? gulp -v?? 出現版本號則表示成功

3：cd進你的項目，本人建議在desktop新建一個文件夾（我的叫gulp css專門編譯css）。cd進入 執行npm init 創建package.json 文件。一路按回車就行了

?

4：安裝構建化工具gulp-autoprefixer?? cd到你的項目路徑下（桌面新建的文件夾下）? 執行 npm install gulp-autoprefixer --save-dev? 耐心等待安裝完成

?

5：在新建的文件夾（gulp）下手動新建添加gulpfile.js文件。gulpfile.js里面的內容為：(直接copy進去)

var gulp = require('gulp'),autoprefixer = require('gulp-autoprefixer');gulp.task('testAutoFx', function () {gulp.src('css/announcement.css') //單個css文件// gulp.src(['css/detail.css','css/detail_old.css','css/home.css','css/home_new.css','css/main.css','css/main_new.css']) //如果有多個css文件 gulp.src(['src/css/index.css','src/css/index1.css']) .pipe(autoprefixer({browsers: ['last 4 versions', 'Android >= 4.0'], //適配到瀏覽器最新的幾個版本cascade: true, //是否美化屬性值 默認：true 像這樣：//-webkit-transform: rotate(45deg);// transform: rotate(45deg);remove:true //是否去掉不必要的前綴 默認：true })).pipe(gulp.dest('dist/css')); //dist 輸出編譯后的css路徑 });

?

6：cd 進你的項目本地 全局安裝gulp? 執行npm install gulp

7：執行gulp testAutoFx

?

??? 最后你的文件夾會多個dist文件夾，里面放的就是gulp后的css文件。對比下

?

?

?具體也可以參考：http://www.ydcss.com/archives/18#lesson5

轉載于:https://www.cnblogs.com/Gherardo/p/7068583.html

總結

以上是生活随笔為你收集整理的gulp前端构建化工具，帮你搞定不同浏览器的兼容性写法问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。