gulp

gulp
Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。
使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量
- 把一个文件拷贝到另一个位置

• 把多个js或css文件合并成一个文件，以减少网络请求数
• 对js文件和css文件进行压缩合并 以减少网络流量
• 压缩图像文件，以减少网络流量
• 创建一个可以实时刷新页面内容和本地服务器等等
• 解析 css预处理器 解析成css代码 sass less
  实例开发过程中项目目录
  根目录
  src/app 源码 开发环境的代码
  .html
  css
  css
  sass
  .sass
  js
  js
  dist 生产环境
  安装gulp
  npm install gulp@3.9.0 -g 注意安装gulp3版本 4版本 是新的
  创建一个Gulp项目
  第一步，创建一个叫project文件夹作为我们的项目根目录。在目录里运行npm init命令行来初始化项目。
  npm init命令行创建一个package.json文件，用来保存关于项目的信息，比如一些在项目中使用的依赖（Gulp就是一个依赖）。
  一旦package.json文件创建后，我们可以使用下面命令行，在项目中安装Gulp
  $npm install gulp@3.9.0 --save-dev
  app目录是开发时源代码

dist是最终编译完成代码（后期vue/react都是这样，前端工程自动化目录）
根目录下创建 gulpfile.js 这是gulp的配置文件
第一步是在gulpfile.js中requireGulp
var gulp = require(‘gulp’);
这个require声明告诉Node在node_modules中寻找名为gulp的包。一旦包被找到，我们就将它里面内容赋值到变量gulp中。
我们现在可以开始使用gulp变量写一个gulp任务。一个gulp任务的基本语法是：
gulp.task(‘task-name’,function(){
//stuff here
})
task-name指的是任务的名称，当你在Gulp中运行这个任务时，将会使用这个名称。你也可以在命令行中运行相同的任务，通过gulp task-name
gulp.task(“task-name”,[othertasks]);
gulp两个核心概念
流
管道
gulp常用插件
1.gulp-less: 把less文件转成css文件
2.gulp-sass 讲sass文件转成css
3.gulp-clean-css：css文件压缩。
4.gulp-uglify：js压缩
5.gulp-concat：js合并
6.gulp-rename：重命名，给js压缩文件添加.min后缀
7.gulp-jshint：js语法检查
8.gulp-connect 实时服务器
9.gulp-babel插件 es6转es5
gulp-htmlmin压缩html
监听文件
gulp.watch(“路径”,[‘tasks’]) 以,分割
less sass stylus css预处理器
将css变成 语言，可以有变量，嵌套，计算，函数…混合 宏
less
新建以.less结尾文件
1,less变量声明
一般在less文件的顶部声明
语法：
@color:#333;

#box{
	background:@color;
}
		2,嵌套规则
		3.混合
				-1,不传参
.borderRound{
	border-radius:5px;
}
#box{
	border:1px solid #000;
	.borderRound;
}
-2,传参
.bgColor(@color=#890){
	background:@color;
}
#box{
	.bgColor(#000);
}
#box{
	.bgColor();
}