gulp中css压缩,gulp压缩css

gulp压缩css,选用的依赖是gulp-clean-css,在压缩大型项目时还对用到一个dom流压缩文件选取的依赖gulp-dom-src

依赖安装:npm i gulp-clean-css

依赖安装:npm i gulp-dom-src

gulpflie:

```

var gulp = require("gulp"),

htmlSrc = require("gulp-dom-src"),//在html页面中选取文件合并压缩

concat = require("gulp-concat "),

cleancss = require('gulp-clean-css'); //压缩css

gulp.task('cssmin', function () {

// 登录页面css压缩

htmlSrc({file: './student/login.html', selector: 'link:not([href*="mobile"],[href*="examTitle"])', attribute: 'href'})

.pipe(concat('login.min.css'))

.pipe(cleancss())

.pipe(gulp.dest('dist/css'));

});

//执行方法

gulp.task('default', [ 'cssmin']);

在没有标签的情况下,cssmin方法能够完整的执行。但是在存在icon小图标时,html选取css文件路径时找到icon-link标签后就不会往后执行。

造成的现象是:gulp压缩完毕后不会报错但是压缩出来的css文件会少代码

解决方法一:

这个标签写在html文件所有link标签的最后面

解决方法二:

htmlSrc选择文件的时候把标签排除。如:

```htmlSrc({file: './student/login.html', selector: 'link:not([href*="mobile"],[href*="examTitle"])', attribute: 'href'})```

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值