上一篇我有讲过,项目里面冗余的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