使用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,要么没有效果,要么报错,如果有同学懂这个,还望告知一下。

参考文章

结束

你学会了吗?

发表评论

电子邮件地址不会被公开。 必填项已用*标注