Grunt搭建AngularJS项目

最新推荐文章于 2018-08-08 18:00:52 发布

藏红

最新推荐文章于 2018-08-08 18:00:52 发布

阅读量5.4k

点赞数 2

本文链接：https://blog.csdn.net/ch717828/article/details/50339087

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

AngularJS

7 篇文章 0 订阅

订阅专栏

开始之前，确保环境已经安装了 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']);

};