一、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);
}

gulp AND suss相关推荐

gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:"grun ...
Gulp快速入门教程
Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废 ...
gulp die('click').live('click' composer
gulp die('click').live('click' composer packagist.org https://getcomposer.org/ 下载后 php composer.pha ...
eslint 换行_javascript – 预期的换行符为“LF”,但在Eslint中使用gulp找到“CRLF”换行符...
当在gulp项目中使用eslint时,我遇到了像这样的错误的问题.预期的linebreaks为'LF',但是发现'CRLF'linebreak-style,我正在使用 Windows环境运行gulp, ...
thinkphp整合系列之gulp实现前端自动化
这又是一个一次整合终身受益:不止是终身:换个项目同样可以很方便复用:不信你看另一个项目: thinkphp整合系列之gulp实现前端自动化虽然我等叫php程序猿:但是不可避免的是要跟html打交道的 ...
gulp插件之browser-sync安装报错
2019独角兽企业重金招聘Python工程师标准>>> 最近做前端开发,一直用gulp来写一些自动化脚本.之前用的npm的镜像为edunpm,很简单,因为这个镜像非常的快. 但是不知 ...
55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...

gulp AND suss