使用node.js的gulp-uncss清除无用多余的CSS

导语：叶子的一个项目CSS太过臃肿了，希望清除掉无用多余的CSS，叶子试了很多的工具，比如firefox的CSS usage、node的purify-css、node.js的uncss，都不太好用，最后找到了gulp-uncss，结果比较满意。

安装Node.js

gulp-uncss是基于Node.js的，我们需要先在Windows10上安装Node.js。

Node.js最新版本v10.1.0下载地址：node-v10.1.0-x64.msi。

安装很简单，msi包会自动给你配置环境变量，你要做的是下一步下一步。msi包会自动给你安装npm，这个npm在后面安装模块需要。

安装完成后，检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入”cmd” => 输入命令”path”，输出如下结果：

PATH=D:\Program Files\nodejs\;d:\Program Files\Microsoft VS Code\bin;C:\Users\admin\AppData\Roaming\npm

注意，文章中的命令如果不特别说明，都是指在Windows的CMD方式下面执行的。

如果你直接输入node命令执行后，需要退出的话，node命令为：

.exit

查看node版本

node --version

如果需要更详细的信息，请看这里。

安装gulp

在命令行方式下执行下面的命令。

npm install -g gulp

参数-g表示全局安装，如果不加这个参数，表示只为这个项目安装。

创建一个项目

先在E盘下面新建一个css的目录，然后在命令行方式下进入这个目录。

E:

cd css

npm init

npm init表示初始化一个项目，下面是具体的过程，其实很简单，就是填写名字、作者，注意entry point很重要，项目的主要调用文件entry point：gulpfile.js。

npm init


This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (css) css
version: (1.0.0) 1.0.0
description: css
entry point: (cssuse.js) gulpfile.js
test command:
git repository:
keywords:
author: wordpressleaf
license: (ISC)
About to write to E:\css\package.json:

{
  "name": "css",
  "version": "1.0.0",
  "description": "css",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wordpressleaf",
  "license": "ISC"
}


Is this ok? (yes) y

安装gulp-uncss

其实我们已经在前面全局安装了gulp，在这里也可以再安装一次，不加-g表示安装在这个项目目录下面，它会生成一个node_modules的目录。

npm install gulp --save-dev

npm install gulp-uncss --save-dev

全局安装

npm install -g gulp --save-dev

npm install -g gulp-uncss --save-dev

如果缺少支持包，那就执行下面的语句。

npm install

这个语句似乎会把所有的包都安装上，叶子把上面的命令都执行了，原因是叶子也不懂Node.js ，按照别人的文章总结胡乱安装的。

参考文章.

新建gulpfile.js

安装完成后在目录里创建一个文件 gulpfile.js 注意文件名不能改，这个文件名就是你开始填entry point的那个文件名。

然后在里面写要执行的任务，如下定义啦一个 uncss 的任务 uncss 这个名字是任务的名字，执行的时候要用到的。

var gulp = require('gulp'),
	uncss = require('gulp-uncss');
console.log('run');
gulp.task('uncss', function() {
	//冗余css文件
	return gulp.src('./css/index.css')
		.pipe(uncss({
			//使用css的html页面，可多个
			html: ['./html/index.html','./html/index1.html','./html/index2.html','./html/index3.html']
		}))
		//输出目录
		.pipe(gulp.dest('./res/index.css'));
});

清理无用多余的css

进入命令行CMD模式，执行下面的命令。

gulp uncss


run
[12:29:50] Using gulpfile E:\css\gulpfile.js
[12:29:50] Starting 'uncss'...
ReferenceError: Can't find variable: jQuery

  https://wordpressleaf.com/wp-content/themes/chinatous/js/chinatours.js?ver=3.3:53 in global code
ReferenceError: Can't find variable: jQuery

  https://wordpressleaf.com/wp-content/themes/chinatous/js/chinatours.js?ver=3.3:53 in global code
ReferenceError: Can't find variable: jQuery

  https://wordpressleaf.com/wp-content/themes/chinatous/js/chinatours.js?ver=3.3:53 in global code
ReferenceError: Can't find variable: jQuery

  https://wordpressleaf.com/wp-content/themes/chinatous/js/chinatours.js?ver=3.3:53 in global code
[12:29:55] Finished 'uncss' after 4.64 s

注意了，所有的命令执行都是在Windows的CMD命令行模式下执行。执行gulp uncss后，会输出一个精简的CSS文件。

Can’t find variable: jQuery，指定有效的jQuery下载路径后错误可消除，但这样之后清理出来的CSS太小了，CSS不全。

叶子也不知道怎么回事，官方的说明是gulp加载执行页面文件中的js来清理css，当jQuery路径不对的时候，js不能运行，所以会报错。

叶子是Node.js零基础，运行purify-css、uncss，要么没有效果，要么报错，如果有同学懂这个，还望告知一下。

参考文章。

结束

你学会了吗？