使用webpack或者gulp去除多餘CSS
上一篇我有講過,專案裡面冗餘的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