grunt

最近看了下angular，顺便就看到了前端自动化构建工具grunt
Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。Grunt 0.4.x 必须配合Node.js >= 0.8.0
版本使用。

快速开始

• 安装nodejs

brew install node

如果已经安装了nodejs，请确保当前环境中所安装的 npm 已经是最新版本

sudo npm update -g npm

注：npm是nodejs自带的包管理工具（类似于maven），不需要再另行安装了

• 安装grunt

sudo npm install -g grunt-cli

注：上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

• 使用grunt
  • 新建文件夹, 如 grunt
  • 进入文件夹执行

    npm init
    

Paste_Image.png

然后可以在文件夹中看到一个package.json，内容如下：

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

注：name不能为grunt, 否则会报错

• 安装grunt插件

npm install <module> --save-dev

此命令不光安装了<module>，还会自动将其添加到devDependencies配置段中，如下：

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

npm install grunt --save-dev  #安装Grunt最新版本到项目目录中，并将其添加到devDependencies内
npm install grunt-contrib-jshint --save-dev  #安装 JSHint 任务模块

• 新建Gruntfile.js文件，和package.json都位于项目根目录下

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);
};

以上是使用压缩插件压缩和混淆js

• 运行grunt

grunt  #在根目录下执行