node.js脚本应用之 ===》使用gulp-uncss清理多余无用css

6 篇文章 0 订阅

首先我想要把出css清理一下  因为过多无用的css占用资源,百度得知火狐有款插件叫做dust-me selector可以用来检查,删除不使用的后来怎么也安装不上插件,后来又查到google也有个插件叫uedits有相似的功能但还是相似的问题还是安装不上。

这时候突然看到就看到了gulp-css一开始还觉得麻烦因为还得使用nodeJs,但是后来因为前两种的方法完成不了并且浪费了大量的时间因为觉得开始使用gulp-css

1.首先我执行nmp install  --》 node delcss.js文件发现报错说没有发现packjson.json的文件

后台查资料发现原来是少了npm init  这是我就感到有点疑惑了package.json文件,这时我就明白了npm init 是用来生成package.json的,而npm install 是要安装node.js的包,下面是一些参数

npm inistall packageName本地安装,安装到项目目录下,不在package.json中写入依赖
npm inistall  packageName -g全局安装,安装在Node安装目录下的node_modules下
npm inistall  packageName --save安装到项目目录下,并在package.json文件的dependencies中写入依赖,简写为-S
npm inistall  packageName --save-dev安装到项目目录下,并在package.json文件的devDependencies中写入依赖,简写为-D

 

 

 

 

 

 

2.然后安装gulp和gulp-uncss:命令如下:

npm install gulp --save-dev  (这里有个雷,最后揭晓正确答案

npm install gulp-uncss --save-dev 

3.然后新建一个文件名称gulpfile.js(网上有人说这个文件名不能改只能是这个,这个我表示怀疑,一会我要亲自测试),

然后再文件中写入任务:

var gulp = require('gulp');
var uncss = require('gulp-uncss');
console.log('run');
gulp.task('uncss', function() {
    //冗余css文件
    //指定目录下的所有css文件
    return gulp.src('css/*.css')
        .pipe(uncss({
            //使用css的html页面,可多个
            html: ['100.html']
        }))
        //精简后css的输出目录
        .pipe(gulp.dest('./out'));
});
console.log('success');

gulp.task('任务名称',function(){})   这个任务名称很关键是一会我们运行时使用的名称。

然后打开当前命令框输入命令 gulp uncss  然后报错

 百度了之后才知道原来是没有这个命令:可是我已经安装了呀 ,然后查资料知道  自己当时敲得命令把gulp装成了局部模块,不得已又重新装一遍npm i -g gulp  这下再执行 就没有问题了

 

问题解决:我把名称改成其他名字之后 再执行gulp uncss 报错了

gulpfile.js的名称是要固定的

正确执行如上

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值