我的或团队开发AngularJS项目时,有不少JavaScript编辑器能够选择。使用优秀的集成开发环境(Integrated Development Environment)能节省不少时间,并且编写代码更加高效。工欲善其事,必先利其器。html
支持AngularJS较好的编辑器有如下:前端
Sublime Text3 https://www.sublimetext.com/ 特色:入门简单,插件多。支持三大操做系统平台。
node
其余。还有重量级的Visual Studio 2015等等。jquery
为何须要构建工具?webpack
一句话:自动化。对于须要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具能够减轻你的劳动,简化你的工做。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工做。git
目前在前端开发过程当中经常使用的构建工具备2种,一个是Grunt,另一个Gulp。github
简介:Grunt生态系统很是庞大,而且一直在增加。因为拥有数量庞大的插件可供选择,所以,你能够利用Grunt自动完成任何事,而且花费最少的代价。若是找不到你所须要的插件,那就本身动手创造一个Grunt插件,而后将其发布到npm上吧。先看看入门文档吧。web
特色:express
简介:gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务,而 Gulp 一切都经过代码实现。
特色:npm
易于学习:经过把API降到最少,你能在很短的时间内学会Gulp。构建工做就像你设想的同样:是一系列流管道。
为何须要包管理工具?
由于如今前端开发有更多的类库和框架使用,通常状况下,一个Web前端项目至少须要使用5个以上库和第三方组件。可是须要前端工程师一直关注这些类库和框架,并且在升级的时候能升级到特定的版本是一件很具备挑战性的工做。并且各个版本之间还有一些依赖的关系。因此为了解决这些问题,不一样的团队开发了不一样的包管理工具。而目前主流的包管理工具备如下3类:
Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.
能够看到Bower不只能管理框架,类库,并且还能够帮前端工程师管理静态文件assets,或者实用的插件或小工具等内容。
全局安装Bower
npm install -g bower
使用Bower安装包
bower install <package>
好比下面命令是安装最新版本jQuery和Bootstrap
bower install jquery
bower install bootstrap
NPM:Node Package Manager.NPM最初只是做为node.js的包管理工具,在前端开发过程当中,大可能是使用它安装构建等相关工具,或者写Node.js生成mock数据须要它安装相应的express和body-parser等模块。其实npm自己也是能够做为包管理工具来使用。好比使用npm安装jQuery和Angularjs,命令以下所示:
npm install jquery
npm install angular
成功安装以后,在当前目录下面会有一个node_modules
文件夹,有2个子文件夹,分别是jQuery和Angular。截图以下所示:
facebook发布的新一代包管理工具,旨在解决以往使用npm做为包管理会遇到的一些问题。从其官方介绍能够看到其重点强调的3个点:快、可靠、安全。
https://yarnpkg.com/
使用和参考:[http://imweb.io/topic/581f6c0bf2e7e042172d618a]
在Google趋势里面也能够看到以上四种包管理工具使用状况。由于Yarn和大数据里面一个组件是相同的名字,因此这里的yarn不必定就是yarn这个包管理工具。
聊聊Webpack
Webpack 是一个前端资源加载/打包工具,只须要相对简单的配置就能够提供前端工程化须要的各类功能,而且若是有须要它还能够被整合到其余好比 Grunt / Gulp 的工做流。
Webpack完成的是打包的任务,它不负责包的安装,安装咱们仍是也借助前面三者。
入门和使用方法能够参考:Webpack从入门到上线