angularJS项目之前端开发环境搭建

一、项目工具选择

  npm 随同nodeJS一起安装的包管理工具    

   bower  前端包管理工具 管理web站点的各种框架、类库等等

   grunt  构建工具

    git 版本控制工具

二、开发环境搭建

1.node 下载安装

https://nodejs.org/zh-cn/download/   ||   https://nodejs.org/en/download/

$ node - v
    // 查看node版本
$ npm -v
    // 查看npm版本

2.git 下载

https://www.git-scm.com/download/

安装以后配置 

 右键 ’Git Bash Here‘ 打开git的命令行窗口

$ git config --global user.name "Your name"
$ git config --global user.email "Your email"

3.淘宝镜像

npm --registry https://registry.npm.taobao.org install <package>

3.bower下载

$ npm install bower -g

4.grunt 安装

$ npm install grunt-cli -g    // 全局安装grunt-cli
$ npm install grunt -g        // 全局安装grunt

 grunt网址：https://www.gruntjs.net/

5.新建项目 

$ mkdir angularPro
$ cd angularPro

6.初始化包管理

$ npm init

根据提示输入项目的配置 完成以后根目录下生成 package.json 以后可根据 npm install 安装项目的包

$ bower init

根据提示输入项目配置 完成以后根目录下生成bower.json 之后可根据 bower install 安装项目的包

7.开始构建开发环境

$ npm install grunt --save-dev  // 项目安装grunt并且保存在package.json 中devDependencies中

5.gruntfile.js 创建
        可以手动根目录下创建 gruntfile.js
         懒办法

$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
$ npm install grunt-init --save-dev
$ grunt-init ~/.grunt-init/gruntfile

 根据提示会在根目录下面创建 Gruntfile.js 并把响应的插件的配置写上并且添加到package.json
  6.打开Gruntfile.js 多加了几个插件 但是没有下载

$ npm install

  根据package 里面的dependence 下载包
    7.根据Gruntfilepe 配置 新建几个测试文件 lib/test/test.js  test/test/test.js 执行 grunt default
        看到多出来 dist文件 并且生成合并压缩的js文件
    8.本地服务  grunt-contrib-connect 插件

$ npm install grunt-contrib-connect --save-dev

   配置：

module.exports = function(grunt) {
    grunt.initConfig({
        // Metadata.
        pkg: grunt.file.readJSON('package.json'),
        banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
          '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
          '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
          ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
        // Task configuration.
        ,
       connect: {
          server: {
              options: {
                  port: 8000,
                  base: