理解Gulp：用自动化构建工具增强你的工作流程

• 工作流程:

  通过一些IDE,实现自动编译

• 构建工具:

  1： less，saas，stylus实时编译成css、
  ES6,ES7,ES8实时编译成ES5，ES3
  2： 压缩文件，合并文件，整理文件
  3：提供一个实时同步的服务器

• 自动化

  1：写入：gulpfile.js文件：自动化管理文件
  2：通过命令gulp 启动 管理文件中的相关gulp命令代码

二、基础入门操作流程

• 开始前主要注意的点

  1：首先先创建一个项目文件，名为：gulpDemo；

  2：以下操作是基于已安装node.js【一种服务器编程环境】，主要是Node.js的包管理器npm，我们可以很方便的利用它下载我们需要的依赖文件等。若尚未安装的可能无法实现以下的步骤；

  3：同时命令行的输入均是通过git命令行界面输入，因此也需安装一下Git

• No1：初始化，输入命令行cnpm init -y，此时gulpDemo文件中多了一个node_modules的文件夹

• No2：全局安装gulp，输入命令行：cnpm i -g gulp

• No3：在当前目录下安装gulp，输入命令行：cnpm i -D gulp，此时gulpDemo文件中多了一个package.json的文件
  ps：安装完成后，在命令行界面输入：gulp -v 确认是否可以访问到环境变量。若出现如图所示
  
  则说明成功啦~

• No4：在当前目录下创建一个名为：gulpfile.js的文件，这个文件的名称是约定俗成的，所以最好都以此命名，嗯这个文件就是把它理解为自动化管理的文件，通过命令来启动文件中相关的配置。

• No5：开始编辑你的第一个任务吧
  如图所示，在gulpfile.js中写入如图所示的代码
  
  在命令行界面输入：gulp，得到如图所示
  
  Bingo，已经成功进入gulp的大门啦

学习笔记与深入示例

根据gulp官网上的介绍，这是一个基于流的自动化管理工具，按照目前学习深度上来谈谈我的理解，举个栗子，工厂的自动化，一般是通过流水线的自动化操作提高作业效率，从而取代了普通人力的作用，将一些固定、繁杂、又必须的操作交由流水线上的自动化作业完成。再来看看项目开发中，大量的项目，一般会存在开发时的实时编译，最后文件的合并，整理，兼容处理，压缩打包等着一系列工作，这种繁琐又必要的操作交由人来处理，无疑是会被新的方式取代——Gulp，它就是用来处理这些的，通过基于流的方式【流水线、管道pipe】
这说明其中的一点：它是可以处理多个不同的任务。

• 示例代码一
  调用task这个方法：gulp四大API之一
  task(‘任务名称’，[导入其他任务]，function(){
  代码})
  
  //这个示例中并没有导入其他任务
  在命令行界面输入：gulp study【任务名称】；得到箭头所指的语句
  

---

• 示例代码二
  默认的情况下添加其他任务：默认是指在命令行界面仅输入：gulp，而不是gulp +【任务名】
  
  得到如下图所示：
  
  bingo！成功执行了。这里默认情况下任务后添加了参数【数组：数组里面是其他任务的名称，这里是名为study的任务】,同时从代码代码执行结果上来看，是先执行数组里的任务，在执行默认情况下的任务。
  以上就是简单的基础入门，一些可能存在但是又不知道怎么表述更准确的部分，等到日后工作后有所提升再来补充=。=

补充：环境变量

在安装gulp成功之后，在命令行界面输入：gulp -v出现报错或者提示不存在的时候，这时，需要修改一下环境变量。PS：对环境变量修改不是确定的，最好还是不要改了。。。一旦改错或者不小心删掉修改了某一环境变量，极有可能把人逼疯，这时候，可以请教其他小伙伴~

• 步骤1：找到node文件的地址,如图所示：我是放在e盘的其中一个exe文件夹中
  

• 步骤2：点击文件，发现了一个node_modules的文件夹；
  

• 步骤3：点击文件，发现了一个gulp的文件夹；
  

• 步骤4：点击文件，发现了一个bin的文件夹；
  

• 步骤5：点击文件，发现一个gulp.js的文件；就是它啦，此时复制当前的路径
  

• 步骤6：找到系统属性，在高级里点击环境变量
  

• 步骤7：找到系统属性，系统属性，系统属性；重要的事说三遍！！！然后看见第二个箭头，点击Path，再看第三个箭头，点击编辑，编辑，编辑
  

• 步骤8：进入之后，发现是这样的，此时点击新建，新建，新建
  

• 步骤9：：在箭头所在的框里把之前复制的路径粘贴到这里就OK啦~之后别忘记点击确定，确定
  

PS：个人经历：有时会发现明明环境变量添加成功，且能正确访问到了，但会有时出现无法访问到环境变量，这时，除了文件发生修改需要修改路径外；还有解决方案：如图所示：点击添加的路径，移动到最下方或者最上方

OK，暂时就这些了~