使用 gulp 构建 Angular 项目
Posted web前端分享社
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 gulp 构建 Angular 项目相关的知识，希望对你有一定的参考价值。
来源：IBM
随着 Web "前后端分离" 架构的日渐普及，Angular.js 因为其 MVVM 模式使其受到广大前端开发者的青睐。然而，在前台项目开发过程中，依赖包的管理、JavaScript / SASS / Less 的编译和压缩、图片的压缩、版本更新，这些零碎繁多的任务阻碍着项目的构建和部署。所以，前端项目的自动化构建也成为了开发中的必备环节。
什么是 gulp?
gulp 是一个构建工具，可以通过它自动执行网站开发过程中的公共任务，比如编译 SASS/Less，编译压缩混淆 javascript,，合并编译模板和版本控制等。因为 gulp 是基于 Node.js 构建的，所以 gulp 源文件和开发者自己定义的 gulpfile 都被写进 JavaScript 里，前端开发者可以用自己熟悉的语言来编写 gulp 任务。
gulp 本身并不能完成这么多种任务，不过它可以借助 npm 丰富的插件库。开发者可以在 npm 中搜索 gulpplugin 找到想要的插件。例如本文中将要提到的 gulp-cssmin, gulp-jshint, gulp-concat、gulp-inject 等等。
为什么选择 gulp？
其实现有的基于 Node.js 的构建工具有很多，比如 Bower，Yeoman，grunt 等。而且自 2013 年 grunt v0.4.0 发布以后，grunt 已经改变了前端的开发方式。那么为什么我们要选 gulp？
gulp 最大的特点是所有的任务都是以 Node.js Stream 的形式处理，构建流程可以由 Stream 之间的 pipe 来定义，省去了把中间文件写到磁盘再读取的过程，而且任务都是默认并行，速度比 grunt 快很多，配置也感觉更省心。
易于使用：采用代码优于配置策略，gulp 让简单的事情继续简单，复杂的任务变得可管理。
高效：gulp 基于 Node.js 流 Unix 管道连接的方式，不需要往磁盘写中间文件，可以更快地完成构建。
高质量：gulp 每个 task 只完成一个任务，提高 task 的重用度。
易于学习：gulp 核心 API 约 5 个，开发者能在很短的时间内学会，之后就可以通过管道流来组合自己需要的 task。
安装 gulp
首先，gulp 需要全局安装。注意一点，gulp 的安装依赖于 npm，所以要在环境中装好 Node.js。安装好 Node.js 以后运行以下命令：
清单 1. 全局安装 gulp
|
1
以上是关于使用 gulp 构建 Angular 项目的主要内容，如果未能解决你的问题，请参考以下文章 使用 generator-angular-fullstack 构建 Heroku 应用程序失败 Karma 为具有无效行号的 Angular 项目生成 lcov 报告 Laravel（@ 8000）+ Angular with Gulp（@ 9000），如何在请求9000时让gulp代理8000端口？ |