上一篇我有講過，項目里面冗余的css一般分為兩種情況：

有過多重復的CSS代碼；

有寫CSS代碼沒有任何作用；

接下來針對，第二種情況我們看一下使用webpack 和 使用 gulp 的兩種情況下的處理方案。

---

webpack的完整處理方案：

less/sass文件打包和分離

自動處理css前綴

消除未使用的css

完整的webpack.config.js文件

---

一、less文件打包和分離

1、要使用less，首先使用npm安裝less服務；還需要安裝Less-loader用來打包使用。

npm install less --save-dev npm install less-loader --save-dev

2、在module中配置

分別的 build文件夾下面的 webpack.dev.conf.js（開發環境）、webpack.prod.conf（生產環境） 這兩個文件module進行配置

webpack.prod.conf.js文件

var webpackConfig = merge(baseWebpackConfig, {module: {rules: [{test: /\.css$/,include: config.appSrc,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: cssLoaders.own})},{test: /\.less$/,include: config.appSrc,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: (cssLoaders.own).concat({loader: 'less-loader',options: {modifyVars: theme.theme3}})})},{test: /\.css$/,include: config.appNodeModules,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: cssLoaders.nodeModules})},{test: /\.less$/,include: config.appNodeModules,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: cssLoaders.nodeModules.concat({loader: 'less-loader',options: {modifyVars: theme.theme3}})})}]}

---

webpack.dev.conf.js文件

module.exports = merge(baseWebpackConfig, {module: {rules: [{test: /\.css$/,include: config.appSrc,use: ['style-loader'].concat(cssLoaders.own)},{test: /\.less$/,include: config.appSrc,use: ['style-loader'].concat(cssLoaders.own).concat({loader: 'less-loader',options: {modifyVars: theme[themeName]}})},{test: /\.css$/,include: config.appNodeModules,use: ['style-loader'].concat(cssLoaders.nodeModules)},{test: /\.less$/,include: config.appNodeModules,use: ['style-loader'].concat(cssLoaders.nodeModules).concat({loader: 'less-loader',options: {modifyVars: theme[themeName]}})}]}

精簡文件

---

{test: /\.less$/,use: [{loader: "style-loader" },{loader: "css-loader" },{loader: "less-loader"}] }

3、在html中編寫一個div，在css中新建一個less文件

HTML

<div id="leesBox"></div>

LESS

@base:yellowgreen; #leesBox{width:300px;height:200px;background: @base; }

4、引入到index.js中

import less from './css/black.less';

5、使用webpack進行打包，輸入npm run server 查看效果

6、less分離

先配置

{test: /\.less$/,use:extractTextPlugin.extract({use:[{loader:'css-loader'},{loader:'less-loader'}],fallback:'style-loader'}) }

再webpack打包，然后lessBox效果正常顯示。之前跟在link后面的style樣式沒有了，我們在看index.css，發現less的樣式進了index.css里面去了

---

二、sass文件打包和分離

1、安裝：因為sass-loader依賴于node-sass，所以需要先安裝node-sass

npm install node-sass --save-dev npm install sass-loader --save-dev

其他與less方式基本一致，將原來的less改成sass即可。

三、自動處理css前綴

為了瀏覽器的兼容性，有時候我們必須加入-webkit、-ms、-o、-moz這些前綴。目的就是讓我們寫的頁面在每個瀏覽器中都可以順利運行。

1、安裝

npm i postcss-loader autoprefixer --save-dev

2、在根目錄新建一個postcss.config.js文件

module.exports = {plugins: [require('autoprefixer')] }

不過webpack 從三開始已經自動集成了 autoprefixer

這就是對postCSS一個簡單的配置，引入了autoprefixer插件。讓postCSS擁有添加前綴的能力，它會根據 can i use 來增加相應的css3屬性前綴。

3、配置

{test:/\.css$/,use:extractTextPlugin.extract({fallback:"style-loader",use:[{loader:"css-loader",options:{importLoader:1}},"postcss-loader"]}) }

4、輸入webpack進行打包，最終效果。css文件里面加了瀏覽器前綴

我們加了無用的name樣式，打包出來，發現沒有，這就對了。

---

四、消除未使用的CSS

使用PurifyCSS可以大大減少CSS冗余

1、安裝

npm install purifycss-webpack purify-css --save-dev

2、引入glob，因為我們需要同步檢查html模板，所以我們需要引入node的glob對象使用。
在webpack.config.js文件頭部引入glob、引入purifycss-webpack

const glob = require('glob'); const PruifyCSSPlugin = require('purifycss-webpack');

3、配置

new PruifyCSSPlugin({paths:glob.sync(path.join(__dirname,'src/*.html'))//src下所有的html })

4、配置好后，我們可以在css文件里，故意寫一些不用的內容，使用webpack打包后，會自動去掉這些多余的內容

我們加了無用的name樣式，打包出來，發現沒有，這就對了。

---

五、完整的webpack.config.js配置文件

const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); const htmlPlugin = require('html-webpack-plugin'); const extractTextPlugin = require("extract-text-webpack-plugin"); const glob = require('glob'); const PruifyCSSPlugin = require('purifycss-webpack');module.exports={//打包調試devtool:'eval-source-map',//入口文件的配置項entry:{entry:'./src/index.js'},//出口文件的配置項output:{//輸出的路徑，用了Node語法path:path.resolve(__dirname,'dist'),//輸出的文件名稱filename:'bundle.js',publicPath:'./'},//模塊：例如解讀CSS,圖片如何轉換，壓縮module:{rules:[{test:/\.css$/,use:extractTextPlugin.extract({fallback:"style-loader",use:"css-loader"})},{test:/\.(png|jpg|gif)/,use:[{loader:'url-loader',options:{limit:500000}}]},{test:/\.(htm|html)$/i,use:['html-withimg-loader']},{test:/\.(jsx|js)$/,use:{loader:'babel-loader',options:{presets:["es2015","react"]}},exclude:/node_modules/},{test: /\.less$/,use:extractTextPlugin.extract({use:[{loader:'css-loader'},{loader:'less-loader'}],fallback:'style-loader'})},{test:/\.css$/,use:extractTextPlugin.extract({fallback:"style-loader",use:[{loader:"css-loader",options:{importLoader:1}},"postcss-loader"]})}]},//插件，用于生產模版和各項功能plugins:[new uglify(),new htmlPlugin({minify:{removeAttributeQuotes:true},hash:true,template:'./src/index.html'}),new extractTextPlugin('/css/index.css'),new PruifyCSSPlugin({paths:glob.sync(path.join(__dirname,'src/*.html'))//src下所有的html})],// 插件，多個插件，所以是數組//配置webpack開發服務功能devServer:{contentBase:path.resolve(__dirname,'dist'),//本地服務器所加載的頁面所在的目錄host:'192.168.118.221',compress:true,port:8081}// 配置webpack服務 }

---

gulp的完整處理方案：

1、說明：gulp-uncss 是gulp的一個插件。gulp是基于nodejs，理所當然需要安裝nodejs；

2、安裝：打開nodejs官網，點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（.msi文件）。然后像安裝QQ一樣安裝它就可以了（安裝路徑隨意）。

3、安裝gulp：全局安裝gulp，執行npm install gulp -g，檢測gulp是否安裝成功，執行gulp -v 顯示版本號即安裝成功，

4、新建一個gulp項目。(不懂的可以看我另一篇文章，點擊即可查看)

5、接下來就是安裝gulp-uncss插件：進入項目根目錄，執行

npm install gulp-uncss --save-dev

6、配置gulpfile.js

var gulp = require('gulp'), uncss = require('gulp-uncss'); gulp.task('uncss', function() { gulp.src('ht3/resource/css/*.css') 這里是需要去除無用css目錄,*.css是目錄下所有的css.pipe(uncss({ html: ['ht3/*.html'] 這里是項目所有的html目錄，})) .pipe(gulp.dest('dist/uncss')); 這里是去除無用css之后生成新的css目錄，})

7、配置好之后，執行命令

gulp-uncss

總結

以上是生活随笔為你收集整理的使用webpack或者gulp去除多余CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

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