配置Nodejs运行环境，安装grunt运行angular项目

一、node.js安装
1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/
2、选安装目录进行安装
3、测试是否安装成功 
$ node -v 
$ npm -v


二、使用淘宝 NPM 镜像
1、大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
2、安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3、这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]


三、全局安装相关工具
1、安装generator-angular
$ cnpm install -g generator-angular；  
  2、安装bower
$ cnpm install -g bower;  
3、安装grunt构建工具，先全局安装
$ cnpm install -g grunt-cli
$ cnpm install -g grunt


四、配置工程
1、通过cmd进入工程根目录
$ cd D:\devsoft\nodejs\projects\angulr
2、安装项目依赖的库
$ cpnm install
3、生成package.json文件（已存在，可以直接粘贴到根目录下）
$ cnpm init
4、当前工程安装bower
$ bower install --save-dev
5、初始化当前工程的bower，此操作会在当前目录下生成bower.json文件
$ bower init
6、当前工程安装grunt和grunt相关插件
$ cnpm install grunt --save-dev 
$ cnpm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
7、当前工程安装livereload插件
$ cnpm install livereload-js --save-dev 
8、新增Gruntfile.js，实现以下功能（已存在，可以直接粘贴到根目录下）
　　（1）合并文件 ： grunt-contrib-concat
　　（2）语法检查 : grunt-contrib-jshint
　　（3）sass编译 : grunt-contrib-sass
　　（4）压缩文件 : grunt-contrib-ugligy
（5）建立本地服务器 : grunt-contrib-connect 
　　 （6）监听文件变动 : grunt-contrib-watch
9、确定根目录下存在index.html
10、执行Gruntfile.js中配置的任务
$ grunt watchit
11、一切正常，则浏览器自动打开，请求地址http://localhost:9001/，显示工程index.html

常见问题：
1、如果出现找不到>> Error: Cannot find module 'xxxx'，则进行对应的安装
$ cnpm install xxxx --save-dev 
2、grunt执行启动服务器，监听文件变动，出现以下错误
Running "watch" task
Waiting...
Warning: Cannot find module 'livereload-js/dist/livereload.js'

是因为没有安装livereload-js，执行上边的第7步即可
3、报错：You need to have Ruby and Sass installed and in your PATH for this task to work.
则安装sass和ruby
ruby下载地址https://rubyinstaller.org/downloads/
下载后安装，勾选上添加系统变量

打开Start Command Prompt with Ruby，命令行中直接输入gem install sass进行装sass

4、配置内容变动监听和自动刷新livereload不起作用
检查是否是360浏览器，如是可以换其他浏览器重试，一般能够正常自动刷新。

package.json代码实例

{
  "name": "angulr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "body-parser": "^1.18.2",
    "connect-livereload": "^0.6.0",
    "faye-websocket": "^0.11.1",
    "figures": "^2.0.0",
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-cssmin": "*",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^3.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-cssc": "*",
    "grunt-htmlhint": "*",
    "livereload-js": "^2.2.2",
    "matchdep": "*",
    "node-sass": "^4.7.1",
    "uglify-js": "^3.1.9",
    "uri-path": "^1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Gruntfile.js代码实例：

// ***********************************
// http://www.gruntjs.net/
// Grunt 是一种自动化任务处理工具，它就是一个工具框架，有很多插件扩展它的功能。
// 一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
// Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。
//***********************************
module.exports = function(grunt) {


  var sassStyle = 'expanded';


  grunt.initConfig({
// 读取 package.json 文件，并把里面的信息获取出来，方便在后面任务中应用（例如下面就用了 <%= pkg.name %> 来输出项目名称），这样可以提高灵活性
    pkg: grunt.file.readJSON('package.json'),

//****任务配置代码****
    // 自动将 ./scss/style.scss 生成 ./style.css
    //sass: {
    //  output : {
    //    options: {
    //      style: sassStyle
    //    },
    //    files: {
    //      './style.css': './scss/style.scss'
    //    }
    //  }
    //},
    // 自动将 ./src/plugin.js 和 ./src/plugin2.js 合并成 ./global.js
    concat: {
      dist: {
        src: ['./js/config.js', './src/*/*.js'],
        dest: './global.js',
      },
    },
    uglify: {
      compressjs: {
        files: {
          './global.min.js': ['./global.js']
        }
      }
    },
    jshint: {
      all: ['./global.js']
    },
    watch: {
      scripts: {
        files: ['./js/config.js'],
        files: ['./js/config.js'],
        tasks: ['concat','jshint','uglify']
      },
      sass: {
        files: ['./scss/style.scss'],
        tasks: ['sass']
      },
      livereload: {
          options: {
              livereload: '<%= connect.options.livereload %>'
          },
          files: [
              '*.html',
              'style.css',
              'global.min.js'
          ]
      }
    },
    connect: {
      options: {
          port: 9000,
          open: true,
          livereload: 35729,
          hostname: 'localhost'
      },
      server: {
        options: {
          port: 9001,
          base: './'
        }
      }
    }
  });
  
  //****插件加载代码****
  // sass编译
  //grunt.loadNpmTasks('grunt-contrib-sass');
  // 合并文件
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 语法检查
  grunt.loadNpmTasks('grunt-contrib-jshint');
  // 压缩文件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 监听文件变动
  grunt.loadNpmTasks('grunt-contrib-watch');
  // 建立本地服务器
  grunt.loadNpmTasks('grunt-contrib-connect');


  //****任务注册代码****
  //grunt.registerTask('outputcss',['sass']);
  grunt.registerTask('concatjs',['concat']);
  grunt.registerTask('compressjs',['concat','jshint','uglify']);
  //来注册一个任务,意思是在 watchit 上面注册了'concat','jshint','uglify','connect','watch'几个任务， watchit 就是别名
  grunt.registerTask('watchit',['concat','jshint','uglify','connect','watch']);
  //default是默认的 task，当你在项目目录执行 grunt 的时候，它会执行注册到 default 上面的任务。
  grunt.registerTask('default',['concat','jshint','uglify','connect','watch']);


};