大家好，我来了，本期为大家带来的前端入门知识是”前端开发：less-gulp如何使用？“，有兴趣做前端的朋友，和我一起来看看吧！
主要内容
- less
- gulp
less和gulp
学习目标
第一节 less上
1.less介绍
是css的预处理语言。除了less，还有scss(sass)、stylus这些预处理语言。
特点：LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。
2.less编译：
1.安装less命令行工具：
使用命令行工具编译less文件
2.卡拉工具
1.安装考拉工具
2.把less文件所在文件夹拖拽到考拉工具中
3.点击编译，然后最小化即可
3.其他编译打包工具
Gulp、webpack
本节作业：
- 会使用命令行工具编译less文件
- 会使用考拉编译less文件
第二节 less语法
1.变量
Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量 ，所以只能定义一次，不能重复使用。
值变量
以 @ 开头 定义变量，并且使用时 直接 键入 @名称。
在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。
选择器变量
让 选择器 变成 动态
属性变量
可减少代码书写量
url 变量
项目结构改变时，修改其变量即可。
声明变量
有点类似于 下面的 混合方法
.
变量运算
不得不提的是，Less 的变量运算完全超出我的期望，十分强大。
- 加减法时 以第一个数据的单位为基准
- 乘除法时 注意单位一定要统一
变量作用域
一句话理解就是：就近原则，不要跟我提闭包。
用变量去定义变量
2.嵌套
& 的妙用
& ：代表的上一层选择器的名字，此例便是header。
媒体查询
在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写
Less 提供了一个十分便捷的方式
唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。
3.混合
不带参数的混合
方法犹如 声明的集合，使用时 直接键入名称即可。
默认参数方法
Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。
@arguments 犹如 JS 中的 arguments 指代的是 全部参数。
传的参数中 必须带着单位。
方法的匹配模式：
- 第一个参数 `left` 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。
- 如果匹配的参数 是变量，则将会匹配，如 `@_` 。
方法的命名空间
要点：
- 在 CSS 中`>` 选择器，选择的是 儿子元素，就是 必须与父元素 有直接血源的元素。
- 在引入命令空间时，如使用 `>` 选择器，父元素不能加 括号。
- 不得单独使用命名空间的方法 必须先引入命名空间，才能使用 其中方法。
- 子方法 可以使用上一层传进来的方法
方法的条件筛选
Less 没有 if else，可是它有 when
要点：
- 比较运算有： > >= = =< <。
- = 代表的是等于
- 除去关键字 true 以外的值都被视为 false
数量不定的参数
如果你希望你的方法接受数量不定的参数，你可以使用... ，犹如 ES6 的扩展运算符。
方法使用！important
使用方法 非常简单，在方法名后 加上关键字即可
循环方法
Less 并没有提供 for 循环功能，但这也难不倒 聪明的程序员，使用递归去实现
4.继承
extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式
extend 关键字的使用
all 全局搜索替换
使用选择器匹配到的 全部声明
5.导入
使用@import可以导入less文件
位置可随意放置，可省略后缀
6.函数
判断类型
isnumber
Iscolor：判断给定的值 是否 是一个颜色。
Isurl： 判断给定的值 是否 是一个 url
颜色操作
数学函数
Ceil：向上取整。
Floor：向下取整。
Percentage：将浮点数转换为百分比字符串。
Round：四舍五入。
Sqrt： 计算一个数的平方根。
Abs：计算数字的绝对值，原样保持单位。
Pow： 计算一个数的乘方。
扩展：
常用的三门语言：Sass、Less 、Stylus
Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说 它完全把 CSS 变
成了一门编程语言。另外 在国内外都很受欢迎，并且它的项目团队很是强大 ，是一款
十分优秀的预处理语言。
Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门
十分独特的创新型语言。
Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加
了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充
本节作业：
- 掌握less语法
- 练习课堂代码
第三节 gulp上
1.gulp介绍
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目
2.安装使用
如果你先前将 gulp 安装到全局环境中了，请执行 npm rm --global gulp 将 gulp 删除再继续以下操作
安装 gulp 命令行工具
只需安装一次
npm install --global gulp-cli
创建项目目录并进入
npx mkdirp my-project
Cd my-project
在项目目录下创建 package.json 文件
安装 gulp，作为开发时依赖项
npm install --save-dev gulp
创建 gulpfile 文件
利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件，并在文件中输入以下内容：
测试
在项目根目录下执行 gulp 命令：
如需运行多个任务（task），可以执行 gulp <task> <othertask>。
本节作业：
安装gulp并运行打包
Gulp语法
1.创建任务：
创建任务
每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable (后面会详细讲解) 类型值的函数。
导出任务
任务（tasks）可以是 public（公开） 或 private（私有） 类型的。
公开任务（Public tasks） 从 gulpfile 中被导出（export），可以通过 gulp 命令直接调用。
私有任务（Private tasks） 被设计为在内部使用，通常作为 series() 或 parallel() 组合的组成部分。
一个私有（private）类型的任务（task）在外观和行为上和其他任务（task）是一样的，但是不能够被用户直接调用。如需将一个任务（task）注册为公开（public）类型的，只需从 gulpfile 中导出（export）即可。
组合任务
Gulp 提供了两个强大的组合方法： series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。series() 和 parallel() 可以互相嵌套至任意深度。
如果需要让任务（task）按顺序执行，请使用 series() 方法。
对于希望以最大并发来运行的任务（tasks），可以使用 parallel() 方法将它们组合起来。
2.异步执行
gulp 任务（task）规范化了所有这些类型的异步功能。gulp 不再支持同步任务（Synchronous tasks）了。因为同步任务常常会导致难以调试的细微错误，例如忘记从任务（task）中返回 stream。
当你看到 "Did you forget to signal async completion?" 警告时，说明你并未使用前面提到的返回方式。你需要使用 callback 或返回 stream、promise、event emitter、child process、observable 来解决此问题。
1.返回 stream
2.返回 promise
3.使用callback
如果任务（task）不返回任何内容，则必须使用 callback 来指示任务已完成。如需通过 callback 把任务（task）中的错误告知 gulp，请将 Error 作为 callback 的唯一参数。
3.处理文件
gulp 暴露了 src() 和 dest() 方法用于处理计算机上存放的文件。
src() 接受 glob 参数，并从文件系统中读取文件然后生成一个 Node 流（stream）。它将所有匹配的文件读取到内存中并通过流（stream）进行处理。
由 src() 产生的流（stream）应当从任务（task）中返回并发出异步完成的信号，就如 创建任务（task） 文档中所述。
流（stream）所提供的主要的 API 是 .pipe() 方法，用于连接转换流（Transform streams）或可写流（Writable streams）
dest() 接受一个输出目录作为参数，并且它还会产生一个 Node 流（stream），通常作为终止流（terminator stream）。当它接收到通过管道（pipeline）传输的文件时，它会将文件内容及文件属性写入到指定的目录中。
向流（stream）中添加文件
src() 也可以放在管道（pipeline）的中间，以根据给定的 glob 向流（stream）中添加文件。新加入的文件只对后续的转换可用。如果 glob 匹配的文件与之前的有重复，仍然会再次添加文件。
分阶段输出
dest() 可以用在管道（pipeline）中间用于将文件的中间状态写入文件系统。当接收到一个文件时，当前状态的文件将被写入文件系统，文件路径也将被修改以反映输出文件的新位置，然后该文件继续沿着管道（pipeline）传输。
4.文件监控
gulp api 中的 watch() 方法利用文件系统的监控程序（file system watcher）将 globs 与 任务（task） 进行关联。它对匹配 glob 的文件进行监控，如果有文件被修改了就执行关联的任务（task）。如果被执行的任务（task）没有触发 异步完成 信号，它将永远不会再次运行了。
可监控的事件
默认情况下，只要创建、更改或删除文件，文件监控程序就会执行关联的任务（task）。 如果你需要使用不同的事件，你可以在调用 watch() 方法时通过 events 参数进行指定。可用的事件有 'add'、'addDir'、'change'、'unlink'、'unlinkDir'、'ready'、'error'。此外，还有一个 'all' 事件，它表示除 'ready' 和 'error' 之外的所有事件。
初次执行
调用 watch() 之后，关联的任务（task）是不会被立即执行的，而是要等到第一次文件修之后才执行。如需在第一次文件修改之前执行，也就是调用 watch() 之后立即执行，请将 ignoreInitial 参数设置为 false
延迟
文件更改之后，只有经过 200 毫秒的延迟之后，文件监控程序所关联的任务（task）才会被执行。如需调整延迟时间，请为 delay 参数设置一个正整数。
5.常用插件
1.压缩JavaScript文件
2.压缩CSS文件
3.压缩HTML文件
命令：npm install --save-dev gulp-minify-html
4.压缩图片文件
5.合并、重命名
6.编译less文件
npm install --save-dev gulp-less
7.将es6代码转成es5
本节作业：
- 练习课堂代码
- 把以前的写的项目进行打包
好了，本期的Web前端开发知识”前端开发：less-gulp如何使用？“介绍完毕了，对前端开发有兴趣的朋友，关注我，更多内容等你看，我们下期再见！
