• SASS搭建流程


    SASS搭建流程

    • 以前的 sass 需要依赖一个 ruby 的环境
    • 现在的 sass 需要依赖一个 python 的环境
    • 但是我们的 node 强大了以后,我们只需要依赖 node 环境也可以
    • 需要我们使用 npm 安装一个全局的 sass 环境就可以了

    安装node环境

    • 先进入到创建的文件夹
    - cd 路径
    
    • 文件夹初始化
    $ cnpm init
    

    在这里插入图片描述
    生成了一个package.json 放置,我们当前项目所有配置信息

    • 本地安装gulp,将gulp安装信息保存在本地,本地多一个node_modules文件
    $ cnpm install gulp@3.9.1 --save-dev
    可简写:$ cnpm i gulp@3.9.1 -D
    
    • 创建一个gulpfile.js,这个文件是用于创建gulp任务的。遵从CommonJS规范。
      在这里插入图片描述
    • 安装sass全局环境
    cnpm install sass -g
    

    在这里插入图片描述

    • 使用gulp-scss编译css文件

    通过下述命令进行安装

    cnpm install gulp-sass —-save-dev
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzR18aX0-1595299671403)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200721103719644.png)]

    • gulp-rename重命名**

    我们通过上述的操作压缩完成以后,发现,新压缩的文件直接将旧的文件给替换掉了,也就是说原来的版本没有了,我们能不能保存没有压缩和已经压缩了的两个文件呢这样的话我们就需要另外一个插件

    通过下述命令进行安装

     cnpm install gulp-rename --save-dev
    

    在这里插入图片描述

    • gulp-minify-css压缩css**
    cnpm install gulp-minify-css --save-dev
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hgwQ5lxI-1595299671408)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200721104348205.png)]

    • 实时编译
    • 在这里插入图片描述
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    Xml---->JAXP DOM解析
    java(web)相对路径,绝对路径
    重定向与转发
    struts2之限制文件上传类型
    Struts2之文件上传上限
    Struts2之result中标准结果代码
    struts2之指定处理的请求后缀
    File.rename操作后,获取文件的名称,输出的名称仍为之前的名称
    硬盤掛載
    Java应用打包后运行需要注意编码问题 .
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617728.html
Copyright © 2020-2023  润新知