使用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