基於bower、grunt搭建angularjs項目

參考：http://blog.csdn.net/ch717828/article/details/50339087
http://www.cnblogs.com/ricky52529/p/4079514.html

說明一下，本機開發環境已準備好，包括nodejs、bower以及全局grunt都已經安裝好了。

首先新建文件夾，並進入該文件夾目錄

1、生成 package.json 文件
這個 package.json 文件其實是 Node.js 來描述一個項目的文件，JSON 格式。
使用 命令來生成 package.json

npm init

它會問我們一些問題，我們可以按需回答，也可以全部使用默認值，以後改起來也很容易。
生成的package.json如下

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2、安裝 Grunt

npm install grunt --save-dev 

將使用npm下載grunt插件，它們將保存到項目根目錄下的node_modules目錄下。

後面的–save-dev參數是說，把這個插件信息，同時添加到package.json的devDependencies中

"devDependencies": {  
    "grunt": "^1.0.1"  
  } 

由於grunt僅在開發階段使用，所以使用–save-dev。如果是運行時使用的，則用–save
3、創建Grunt配置文件
創建一個Grunt的配置文件 Gruntfile.js，內容如下

module.exports = function(grunt) {  
  grunt.initConfig({  
  });  

};

4、爲bower生成配置文件bower.json

bower  init

生成bower.json

{
  "name": "myApp",
  "description": "",
  "main": "index.js",
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

5、使用bower安裝AngularJS

bower install angularjs --save

安裝成功後，在bower.json增加了angularjs

"dependencies": {
    "angular": "angularjs#^1.6.6"
  }

6、安裝grunt插件
concat插件：concat插件用來將多個文件合併成一個文件。安裝該插件的命令如下：

npm install grunt-contrib-concat --save-dev  

安裝成功後，可以看到package.json裏面多了grunt-contrib-concat
接下來在 Gruntfile.js對該插件進行配置、

module.exports = function(grunt) {  
  grunt.initConfig({  
     //讀取package.json文件  
    pkg: grunt.file.readJSON('package.json'),  
    //concat用來合併js文件  
    concat: {  
      options: {  
        // 定義一個用於插入合併輸出文件之間的字符  
        separator: ';'  
      },  
      dist: {  
        // 將要被合併的文件  
        src: ['app/**/*.js'],  
        // 合併後的JS文件的存放位置  
        dest: 'dist/<%= pkg.name %>.js'  
      }  
    },  
  });  

  grunt.loadNpmTasks('grunt-contrib-concat');  
  grunt.registerTask('default', ['concat']);  

};

接下來在 app/目錄下創建兩個js文件， a.js 和 b.js 。
在命令行執行 grunt 之後，會發生在 dist/文件夾下多個一個myApp.js文件，該文件合併了 a.js和b.js 。

7、常用grunt插件
uglify 插件用來對文件進行壓縮；
jshint插件用來對js的代碼規範進行檢查；
watch用來監聽文件，當文件發生變化時會執行tasks中指定的任務；
wiredep插件用來自動將bower_components中的包加入到index.html中；
https://blog.csdn.net/ligang2585116/article/details/53790043

8、完整的gruntfile.js文件

module.exports = function(grunt) {  
    grunt.initConfig({  
        pkg: grunt.file.readJSON('package.json'), 

        //concat用來合併js文件  
        concat: {  
            options: {  
                // 定義一個用於插入合併輸出文件之間的字符  
                separator: ';'  
            },  
            dist: {  
                // 將要被合併的文件  
                src: ['app/**/*.js'],  
                // 合併後的JS文件的存放位置  
                dest: 'dist/<%= pkg.name %>.js'  
            }  
        },  
        //uglify用來壓縮js文件  
        uglify: {  
            options: {  
                // 此處定義的banner註釋將插入到輸出文件的頂部  
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'  
            },  
            dist: {  
                files: {  
                    //uglify會自動壓縮concat任務中生成的文件  
                    'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']  
                }  
            }  
        },  
        //jshint用來檢查js代碼規範  
        jshint: {   
            files: ['Gruntfile.js', 'app/**/*.js'], //要進行js檢查的文件  
            options: {  
                //這裏是覆蓋JSHint默認配置的選項  
                globals: {  
                    jQuery: true,  
                    console: true,  
                    module: true,  
                    document: true  
                }  
            }  
        },  
        //watch用來監聽文件，當文件發生變化時會執行tasks中指定的任務  
        watch: {  
            //監聽的文件  
            files: ['<%= jshint.files %>','app/index.html'],  
            tasks: ['jshint']  
        },  

    });  

    grunt.loadNpmTasks('grunt-contrib-concat');  
    grunt.loadNpmTasks('grunt-contrib-uglify');  
    grunt.loadNpmTasks('grunt-contrib-jshint');  
    grunt.loadNpmTasks('grunt-contrib-watch');  
    grunt.loadNpmTasks('grunt-wiredep');  

    grunt.registerTask('default',['concat','uglify','jshint']); 
};