手把手教你怎么搭建angular+gulp的项目（一）

　　大多时候，咱们要学习一个新东西，不是不愿去学，而是不知道该如何开始。好比学angular，我要怎么开始学？怎么应用到本身项目中？这篇文章就是我根据本身边学习边应用，构建一个项目的切身体会，来说下怎么开始一个angular项目，但愿能帮到你们。

　　首先，做为一个程序员，咱们须要git，Github上那么多资源，有了git，咱们能够更方便地下载各位大神的开源代码。

　　其次，做为一个前端程序员，node这么火，咱们难道不该该跟紧脚本，立刻下载一个nodejs吗？

　　既然前提软件已备好，gulp及angular是什么我就不讲了，只讲怎么用。

　　一、全局安装gulp及bower

　　打开windows控制台，快捷键win+R运行cmd

　　

　　肯定后 运行npm install gulp -g

　　

　　安装完成后，运行 gulp -v 来确认是否安装完成。

　　同理安装bower。

　　二、规划文件目录结构

　　文件目录的规划很重要，我这里规划以下：

　　

　　app：生产环境代码目录，partials下放路由的页面，temp下放指令引用的模板文件；

　　src：源代码目录；

　　vendor：第三方插件目录；

　　index.html：入口html文件。

　　

　　js目录根据模块划分，而不是根据controller/filter/service来划分，这样会很是清晰，什么功能模块的代码在哪里。common为公用模块，全部模块均可复用的东西。

　　建议文件目录的规划根据实际状况来。

　　三、使用gulp

　　打开windows控制台，cd到这个文件夹的src目录下

　　

　　win10能够如上图，在src下按住shift键，鼠标在空白处右击，选中在此处打开命令窗口。

　　win7能够敲命令

　　而后运行npm init

　　

　　接下来的选项能够按Enter键，都默认。完成后能够看到src目录下多了个package.json文件。

　　

　　接下来在src目录下手动新建一个gulpfile.js文件，注意名字不能错。

　　接下来须要在src目录下，运行 npm install gulp --save-dev。这命令的意思是将gulp做为开发环境的依赖项安装在此项目中。

　　因为咱们须要不少gulp工具，好比拼接js的工具，压缩代码的工具，代理服务的工具等等。此处咱们只写个小小的例子，只须要拼接js文件的工具“gulp-concat”，以及代理服务工具“gulp-webserver”等，到时发现工具少了再安装，哈哈哈。

　　运行 npm install gulp-concat gulp-webserver --save-dev 。安装完成后，能够在src/package.json文件下看到变化。

　　

　　接下来，咱们用gulp执行一个小任务。在gulpfile.js文件中编写以下代码：

　　

　　而后在命令窗口运行gulp

　　 

　　会发现默认浏览器被打开，展现的就是index.html，这就是gulp-webserver启动了本地服务。gulp的工具怎么用，能够去npm官网查询。

　　四、使用bower

　　在src目录下运行bower init

　　

　　按enter键默认选项。完成后，能够看到src下有一个bower.json文件。

　　接下来使用bower 安装 angular。执行 bower install angular --save

　　安装成功后，能够在src/bower_components目录下看到angular插件。

　　

　　今天先作到这里，接下来的东西就是怎么用angular写代码，以及gulp具体怎么处理代码。