zoukankan      html  css  js  c++  java
  • 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']);
    <p>在没有<link rel="icon" href="img/examTitle.ico" type="image/x-icon"/>标签的情况下,cssmin方法能够完整的执行。但是在存在icon小图标时,html选取css文件路径时找到icon-link标签后就不会往后执行。</p>
    <p>造成的现象是:gulp压缩完毕后不会报错但是压缩出来的css文件会少代码</p>
    <p>解决方法一:</p>
    <p><link rel="icon" href="img/examTitle.ico" type="image/x-icon"/>这个标签写在html文件所有link标签的<font style="color:red">最后面</font></p>
    <p>解决方法二:</p>
    <p>htmlSrc选择文件的时候把<link rel="icon" href="img/examTitle.ico" type="image/x-icon"/>标签排除。如:</p>
    ```htmlSrc({file: './student/login.html', selector: 'link:not([href*="mobile"],[href*="examTitle"])', attribute: 'href'})```
  • 相关阅读:
    Mysql存储过程和函数
    python反编译chm文件并生成pdf文件
    python转换html到pdf文件
    python获取系统开机时间
    OpenSL ES: 利用OpenSL ES实现录音功能
    android: 根据文件uri 获取文件名
    Java: InputStream转化为byte数组
    Linux: 查看二进制文件
    Vim: 回到上次编辑的位置
    LayoutInflate: Avoid passing null as the view root
  • 原文地址:https://www.cnblogs.com/frogblog/p/9453914.html
Copyright © 2011-2022 走看看