gulp压缩css

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

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

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

gulpflie:gulp

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标签后就不会日后执行。dom

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

解决方法一:code

这个标签写在html文件全部link标签的最后面htm

解决方法二:ip

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

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