Grunt搭建AngularJS项目

来源：互联网发布：p相片软件编辑：程序博客网时间：2024/05/17 06:52

开始之前，确保环境已经安装了 node 和 grunt 。

通过在命令行输入 grunt 查看是否正确安装了grunt 。

通过在命令行输入 node 查看是否正确安装了node 。

生成 package.json 文件

这个 package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：

使用命令来生成 package.json

npm init

生成的package.json如下

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

安装 Grunt

首先安装 grunt

npm install grunt --save-dev

表示通过 npm 安装了 grunt 到当前项目，同时加上了 —save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。不信你打开 package.json 文件看下，是不是多了

"devDependencies": {    "grunt": "^0.4.5"  }

创建Grunt配置文件

创建一个Grunt的配置文件 Gruntfile.js，内容如下

module.exports = function(grunt) {  grunt.initConfig({  });};<pre name="code" class="javascript"> grunt.loadNpmTasks('grunt-contrib-watch');  grunt.registerTask('test', ['concat','uglify','jshint','watch']);

安装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/src/**/*.js'],        // 合并后的JS文件的存放位置        dest: 'app/dist/<%= pkg.name %>.js'      }    },  });  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.registerTask('test', ['concat']);};

接下来在 app/src/目录下创建两个js文件， a.js 和 b.js 。

在命令行执行 grunt test 之后，会发生在 app/dist/文件夹下多个一个Demo.js文件，该文件合并了 a.js和b.js 。

grunt test

安装uglify插件

uglify 插件用来对文件进行压缩。安装该插件的命令如下

npm install grunt-contrib-uglify --save-dev

安装成功后，可以查看package.json里面是否多了grunt-contrib-uglify

接下来对 uglify进行配置。配置文件如下：

module.exports = function(grunt) {  grunt.initConfig({     //读取package.json文件    pkg: grunt.file.readJSON('package.json'),    //concat用来合并js文件    concat: {      options: {        // 定义一个用于插入合并输出文件之间的字符        separator: ';'      },      dist: {        // 将要被合并的文件        src: ['app/src/**/*.js'],        // 合并后的JS文件的存放位置        dest: 'app/dist/<%= pkg.name %>.js'      }    },     //uglify用来压缩js文件    uglify: {      options: {        // 此处定义的banner注释将插入到输出文件的顶部        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'      },      dist: {        files: {          //uglify会自动压缩concat任务中生成的文件          'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']        }      }     },  });  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.registerTask('test', ['concat','uglify']);};

在命令行执行 grunt test ，可以看到 app/dist文件下多了Demo.min.js，该文件对Demo.js进行了压缩。

安装jshint插件

jshint插件用来对js的代码规范进行检查。安装该插件的命令为

npm install grunt-contrib-jshint --save-dev

然后对jshint进行配置。配置文件如下（下面只贴部分代码，整体的配置文件在最后会给出）

  //jshint用来检查js代码规范    jshint: {       files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件      options: {        //这里是覆盖JSHint默认配置的选项        globals: {          jQuery: true,          console: true,          module: true,          document: true        }      }    }

 grunt.loadNpmTasks('grunt-contrib-jshint');  grunt.registerTask('test', ['jshint']);

此时，输入 grunt test ， jshint便会对文件进行检查，并在控制台输出检查的结果

安装watch插件

watch用来监听文件，当文件发生变化时会执行tasks中指定的任务。安装该插件的命令为

npm install grunt-contrib-watch --save-dev

然后对该插件进行配置

 //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务    watch: {      //监听的文件      files: ['<%= jshint.files %>','app/index.html'],      tasks: ['jshint']    },

 grunt.loadNpmTasks('grunt-contrib-watch');  grunt.registerTask('test', ['watch']);

在命令行输入 grunt test之后，会发现watch启动，一直在监听文件的变化，当监听的文件发生变化时，会执行jshint命令来进行检查

安装wiredep插件

wiredep插件用来自动将bower_components中的包加入到index.html中。

安装该插件的命令为

npm install grunt-wiredep --save-dev

在配置文件中，对wiredep进行配置

 //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务    watch: {      //监听的文件      files: ['<%= jshint.files %>','app/index.html'],      tasks: ['jshint']    },

grunt.loadNpmTasks('grunt-wiredep');grunt.registerTask('test', ['wiredep']);

对于该命令的测试，在使用bower安装AngualrJS和Bootstrap时进行

使用bower安装angularjs和bootstrap

为了让wiredep插件能够自动将bower安装的插件注入到index.html中，我们先生成bower的配置文件，使用如下命令：

bower  init

生成的文件如下：

{  "name": "Demo",  "description": "一个例子",  "main": "index.js",  "authors": [    "藏红 <canghong.ch@alibaba-inc.com>"  ],  "license": "ISC",  "moduleType": [],  "homepage": "",  "ignore": [    "**/.*",    "node_modules",    "bower_components",    "test",    "tests"  ]}

接着使用bower安装AngularJS

bower install angularjs --save grunt

安装成功后，在bower.json会看到读了 grunt 和 angularjs

"dependencies": {    "angular": "angularjs#~1.4.8",    "grunt": "~0.4.5"  }

然后在命令行运行 wiredep ，该插件会自动将angularjs加入到index.html中。运行前的index.html内容如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>How to use Grunt Wirdep</title>  <!-- bower:css -->  <!-- endbower --></head><body>  indexasdf123123  <!-- bower:js -->  <!-- endbower --></body></html>

运行后的index.html命令如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>How to use Grunt Wirdep</title>  <!-- bower:css -->  <!-- endbower --></head><body>  indexasdf123123  <!-- bower:js -->  <script src="../bower_components/angular/angular.js"></script>  <!-- endbower --></body></html>

接下来按相同的方式安装 bootstrap命令如下

bower install bootstrap -save

在此运行 grunt test ，发现 index.html内容为

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>How to use Grunt Wirdep</title>  <!-- bower:css -->  <!-- endbower --></head><body>  indexasdf123123  <!-- bower:js -->  <script src="../bower_components/jquery/dist/jquery.js"></script>  <script src="../bower_components/angular/angular.js"></script>  <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>  <!-- endbower --></body></html>

bootstrap.js导入了，但bootstrap.css并未导入。不用担心，这是由 bootstrap的bower.json文件错误导致的，打开自己的bower.json文件，添加如下内容

 "overrides": {    "bootstrap": {      "main": [        "dist/js/bootstrap.js",        "dist/css/bootstrap.css",        "less/bootstrap.less"          ]      }  }

重新运行 grunt test，bootstrap.css被正确注入

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>How to use Grunt Wirdep</title>  <!-- bower:css -->  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />  <!-- endbower --></head><body>  indexasdf123123  <!-- bower:js -->  <script src="../bower_components/jquery/dist/jquery.js"></script>  <script src="../bower_components/angular/angular.js"></script>  <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>  <!-- endbower --></body></html>

安装connect插件

connect插件可以让前端project开启connect服务，安装命令如下：

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

在grunt配置文件中对connnect进行配置

//服务器连接服务    connect: {          options: {          port: 9000,          hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名          livereload: 35729  ,//声明给 watch 监听的端口         keepalive:true, //保持连接          },        server: {          options: {          open: true, //自动打开网页 http://          base: [              ''  //主目录                ]            }        }          }

  grunt.loadNpmTasks('grunt-contrib-connect');  grunt.registerTask('test', ['connect']);

通过grunt test 启动之后，会自动开启浏览器，打开app/index.html

完整的gruntfile.js

module.exports = function(grunt) {  grunt.initConfig({     //读取package.json文件    pkg: grunt.file.readJSON('package.json'),    //concat用来合并js文件    concat: {      options: {        // 定义一个用于插入合并输出文件之间的字符        separator: ';'      },      dist: {        // 将要被合并的文件        src: ['app/src/**/*.js'],        // 合并后的JS文件的存放位置        dest: 'app/dist/<%= pkg.name %>.js'      }    },     //uglify用来压缩js文件    uglify: {      options: {        // 此处定义的banner注释将插入到输出文件的顶部        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'      },      dist: {        files: {          //uglify会自动压缩concat任务中生成的文件          'app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']        }      }     },    //jshint用来检查js代码规范    jshint: {       files: ['Gruntfile.js', 'app/src/**/*.js'], //要进行js检查的文件      options: {        //这里是覆盖JSHint默认配置的选项        globals: {          jQuery: true,          console: true,          module: true,          document: true        }      }    },    //watch用来监听文件，当文件发生变化时会执行tasks中指定的任务    watch: {      //监听的文件      files: ['<%= jshint.files %>','app/index.html'],      tasks: ['jshint']    },    //wiredep自动将bower_components中的包加入到index.html中    wiredep: {      task: {        src: ['app/index.html']      }    },    //服务器连接服务    connect: {          options: {          port: 9000,          hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名          livereload: 35729  //声明给 watch 监听的端口          },        server: {          options: {          open: true, //自动打开网页 http://          base: [              'app'  //主目录                ]            }        }          }  });  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.loadNpmTasks('grunt-contrib-connect');  grunt.registerTask('test', ['concat','connect','wiredep','uglify','jshint','watch']);};

1 0