基于bower、grunt搭建angularjs项目

89 阅读 0 评论 59 点赞

我是靠谱客的博主完美歌曲，这篇文章主要介绍基于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

复制代码

1
npm init

它会问我们一些问题，我们可以按需回答，也可以全部使用默认值，以后改起来也很容易。
生成的package.json如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "myApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2、安装 Grunt

复制代码

1
npm install grunt --save-dev

将使用npm下载grunt插件，它们将保存到项目根目录下的node_modules目录下。

后面的–save-dev参数是说，把这个插件信息，同时添加到package.json的devDependencies中

复制代码

1
2
3
"devDependencies": {  
    "grunt": "^1.0.1"  
  }

由于grunt仅在开发阶段使用，所以使用–save-dev。如果是运行时使用的，则用–save
3、创建Grunt配置文件
创建一个Grunt的配置文件 Gruntfile.js，内容如下

复制代码

1
2
3
4
5
module.exports = function(grunt) {  
  grunt.initConfig({  
  });  

};

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

复制代码

1
bower  init

生成bower.json

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "myApp",
  "description": "",
  "main": "index.js",
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

5、使用bower安装AngularJS

复制代码

1
bower install angularjs --save

安装成功后，在bower.json增加了angularjs

复制代码

1
2
3
"dependencies": {
    "angular": "angularjs#^1.6.6"
  }

6、安装grunt插件
concat插件：concat插件用来将多个文件合并成一个文件。安装该插件的命令如下：

复制代码

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

安装成功后，可以看到package.json里面多了grunt-contrib-concat
接下来在 Gruntfile.js对该插件进行配置、

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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']); 
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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']); 
};