gulp AND suss_综合

一、gulp

gulp工程化的工作：复制/编译/压缩/合并/即时刷新/
如果使用原始的开发方式完成前端的开发，会导致的问题：
? 1）、代码暴露
? 2）、性能问题
? 3）、兼容性问题
? 4）、没法完成模块化
3. 工程化的作用*
? 前端工程化就是为了让前端开发能够“自成体系”。而不是后端的附属品。分别从模块化、组件化、规范化、自动化着手。从设计—》到开发—》到编译打包----》到上线。
如：
? 1）、为了解决代码暴露，性能问题：可以对代码进行压缩、合并
? 2）、兼容性问题：ES6转ES5
? 3）、模块化方案
? 4）、开发服务器的搭建，自动部署
? 5）、自动化的处理
工程化的工具：
? 打包相关的：grunt，gulp，webpack，vite
? 版本管理的：git

二、gulp的介绍

? gulp是前端开发过程中自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；gulp是基于Nodejs的。
? Gulp能完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
? 在实现上，Gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

非常重要的一步

因为，gulp在公司里用的越来越少了，所以，我们学习gulp的目的是：
1）、了解工程化的作用
2）、区分开发目录和发布目录

sass

一、sass介绍

sass是可以让程序员使用编程的方式编写CSS。语法上又完全兼容CSS3。所以，是CSS的扩展语言。

sass官网

二、sass的安装

? sass是基于ruby语言开发的，所以，必须要安装ruby环境，但是不需要学习ruby语言（注:mac下自带Ruby无需在安装Ruby!）。先从官网下载Ruby并安装

? 1、安装ruby：可视化方式（下一步，下一步，就ok）。

? 2、测试ruby是否安装成功

四、sass的语法

1、变量

SASS 中的变量，必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号:进行分隔，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

$nav-color: #F90;.nav {
    width: 100px;color: $nav-color;
}

2、嵌套——Nesting

SASS 中的嵌套主要说的是选择器嵌套和属性嵌套两种方式，正常项目中通常使用的都是选择器嵌套方案

1）、选择器嵌套

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID

如下的CSS代码：

#content article h1 {
     color: #333 }
#content article p {
     margin-bottom: 1.4em }
#content aside {
     background-color: #EEE }

改写成sass的写法

#content {
    article {
    h1 {
     color: #333 }p {
     margin-bottom: 1.4em }}aside {
     background-color: #EEE }
}

把sass的嵌套和html标签的嵌套关系对应起来。

2）、属性嵌套

#box4{
        border:{
    top:{
    width: 100px;color:yellow;}}
}

3、混合——Mixin

sass 中可以通过@mixin 声明混合，可以传递参数，参数名称以$开始，多个参数之间使用逗号分隔，@mixin 的混合代码块由@include 来调用

1）、无参数混合——不建议使用，如果是这样的代码块，直接使用后面提到的@extend 来处理

定义：

@mixin large-text {
    font: {
    family: Arial;size: 20px;weight: bold;}color: #ff0000;
}

引用：

.page-title {@include large-text;padding: 4px;margin-top: 10px;
}

2)、有参混合

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

定义：

@mixin sexy-border($color, $width) {border: {color: $color;width: $width;style: dashed;}
}

引用：

p { @include sexy-border(blue, 1in); 
}

3)、参数的默认值

定义：

@mixin redbox($width:300px,$height:300px) {width: $width;height: $height;background-color: red;
}

引用：

#box5{@include redbox();border:1px solid black;
}#box6{@include redbox(500px,400px);opacity: 0.5;font-size: 12px;
}#box6{@include redbox($height:400px);opacity: 0.5;font-size: 12px;
}

4、继承——extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：

.error {border: 1px #f00;background-color: #fdd;
}.error .intrusion {background-image: url("/image/hacked.png");
}.seriousError {@extend .error;border-width: 3px;
}

编译结果为：

.error, .seriousError {
    border: 1px #f00;background-color: #fdd; }.error.intrusion, .seriousError.intrusion {
    background-image: url("/image/hacked.png"); }.seriousError {
    border-width: 3px; }

5、Partials && @import

? CSS 本身包含一个指令@import，但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源

? SASS 中扩展了这个指令，会把被包含的文件（partials）和包含文件合并在一起。减少了一次HTTP请求。
Partials 文件的规则：
1）、命名规范是以下划线开头的，这样的 scss 文件不会被编译成 css

如：文件名为：_colors.scss。

2）、引入时，不需要添加下划线。

// demo01.scss
@import "colors";

6、数据类型

Sass 支持 7 种主要的数据类型：

数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

详细使用参照官网：https://www.sass.hk/docs/

7、控制指令——Control Directives

SASS 中为了更加方便的处理一些带有逻辑性的样式，如满足某些条件的时候使用指定的样式，或者根据指定列表中的项目循环输出样式等，提供了一些控制指令进行处理
@if：条件控制指令
@for:循环指令
@each:循环指令
@while:循环指令

1）、@if

@if 指令是 SASS 中的一个控制指令，用于在表达式满足条件（true）的时候输出指定的样式，在不满足条件（false）或者表达式为 null 的情况下输出其他的样式

$theme:light;// body的样式搜索
body{@if $theme==dark{background-color: black; }@else if $theme==light{background-color: white;}@else{background-color: red;}    font-size: $fontSize;
}

2)、@for

@for 指令在 SASS 中用于重复处理一组指令
有两种表现形式：
@for $var from <开始值> through <结束值>
@for $var from <开始值> to <结束值>

@for $i from 1 through 10 {ul li:nth-child(#{$i}){  left:($i - 1)*50px;}}

3)、@each

@each 在 Sass 中主要被用来进行列表或者映射数据的循环
主要表示形式：@each $var in

$var 可以是任意变量名称，是 SASS 表达式并且必须是 List

$icons: error waring success;
@each $icon in $icons {.icon-#{$icon}{background-image: url(img/#{$icon}.jpg);} 
}
$colors: red orange yellow green blue;
$i:0;
@each $color in $colors {$i:$i + 1;ul li:nth-child(#{$i}) div:first-child{background-color:$color;}
}

4)、@while

$i: 6;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}

8、函数指令 (Function Directives)

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

$grid-width: 40px;
$gutter-width: 10px;@function grid-width($n) {@return $n * $grid-width + ($n - 1) * $gutter-width;
}#sidebar { width: grid-width(5); 
}