前端工程化工具

前端工程化工具的安装和使用

---

前端近几年发展比较快，出现各种前端自动化构建工具和脚手架工具。作为一名懵逼菜鸟，看着一大堆新颖名词，感觉有点无从下手的感觉。为弄清楚各种工具的用法，自行上网浏览各大虾的博客文章和上官网浏览官方的文档说明。下面记录小编个人学习的过程。

yeoman工作流，官方的解说是可以帮助你快速启动一个新项目，提供最好的方案和工具来帮助你保持生产力。yeoman工作流包括了yo（脚手架工具）、构建工具 (Gulp, Grunt 等) 和包管理工具 (例如 npm 和 Bower)。

• yo 搭建一个新的运用, 配置你的构建设置 (例如 Gulpfile) 然后启动相关的构建进程，管理你构建需要的依赖包（例如 npm）。
  
• 构建系统 是用来构建，预览，和测试你的项目。Gulp 和 Grunt 是两个常见的选择。
  
• 包管理工具 用来管理你的依赖，这样你就不再需要手动下载和管理你的脚本了。 npm 和 Bower 是两个常用的工具。
  

从官方的说明来看，小编依旧是一脸迷糊，为了弄懂各种工具的使用方法，决定从实践出发。毕竟实践出真知嘛。

• 要安装yeoman工作流的工具，可能要用到npm第三方的包管理器，所以要安装Nodejs(现在npm包管理器已经继承到nodejs里面去了)，所以我们可以直接安装nodejs就可以安装到npm。建议选择下载msi格式的安装包。安装过程很简单，直接可以下一步就可以了。
  

• 安装成功以后，我们进行检验一下。window+R然后在弹出的窗口输入cmd进入window的Dos命令窗口，输入node --version && npm --version如果出现一下提示，则npm安装成功。
  

• 接下来全局安装yo脚手架工具，在Dos命令行工具下面运行npm i -g yo，安装成功以后可以直接运行yo --version检验yo是否安装成功。小编安装成功的是1.8.5的版本。
  

• 现在直接运行yo命令，可以看到如下所示。Yeoman 它自己不能做任何操作。 每个操作都是由 generators 基本插件在 Yeoman 环境所完成的。 这里有 很多公共的 generators 并且它很容易 创建一个 generator 去匹配任何工作流。 Yeoman 总是可以为你需要的脚手架工具作出正确的选择。小编已经安装过了express-generator和mean-generator。如果你想安装新的generator可以直接选择install a generator.小编在这里不做演示，我就直接使用express的generator构建一个应用的骨架。
  

• 下面yo脚手架工具会询问一系列问题，来构建你自己的应用。小编选的是ejs模板引擎，css编译器是none，自动化构建工具是gulp。如下所示。
  

• 现在已经完全初始化一个express应用了，在Dos命令窗口中进入到应用项目目录，运行gulp，应用默认监听3000端口，看，现在应用已经跑起来了。应用的目录如下。
  
  

• 接下来我们在浏览状态栏输入http://localhost：3000可以看到服务器返回的回馈信息。
  

• 对应用中的某一个文件进行修改，gulp自动重载。省下我们很多的杀死进程，重启进程的工作。
  

  

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js是基于 Node.js构建的,利用 Node.js流的威力,你可以快速构建项目并减少频繁的工作流。gulp与grunt相类似的东西。而bower包管理器主要是管理javascript、css、图片等前端资源的，npm作为第三方包管理器主要是管理模块化的后端javascript资源。