grunt前端代码管理工具的使用方法（by_shiyou）

标签：

中文官网：http://www.gruntjs.net/

本文为自己整理的使用方法，本意是希望快速使用grunt上手并使用到项目中，具体grunt里面的很多进阶型功能可以会陆续补充；

第一步：先安装nodejs（Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器）

　　方法：https://nodejs.org/en/download/（这是nodejs官网下载页面，选择对于的下载即可）

第二步：安装grunt  命令：npm install -g grunt-cli（在某些系统中可能需要 sudo 指令：sudo npm install -g grunt-cli）

　　注意：查询电脑上grunt的版本号：grunt --version

第三步：手动创建一个文件夹(任何名字的文件夹都可以)

第四步：在文件夹里面创建1个文件 Gruntfile.js

　　 Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件，文件名是 Gruntfile.js 或Gruntfile.coffee　

　　完整的配置文件的代码示例：（具体对代码是要压缩，还是合并，等等都是写入这个文件里面的）

官网api示例
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    concat: {
      options: {
        separator: ‘;‘
      },
      dist: {
        src: [‘src/**/*.js‘],
        dest: ‘dist/<%= pkg.name %>.js‘
      }
    },
    uglify: {
      options: {
        banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘
      },
      dist: {
        files: {
          ‘dist/<%= pkg.name %>.min.js‘: [‘<%= concat.dist.dest %>‘]
        }
      }
    },
    qunit: {
      files: [‘test/**/*.html‘]
    },
    jshint: {
      files: [‘Gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘],
      options: {
        //这里是覆盖JSHint默认配置的选项
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: [‘<%= jshint.files %>‘],
      tasks: [‘jshint‘, ‘qunit‘]
    }
  });

  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
  grunt.loadNpmTasks(‘grunt-contrib-qunit‘);
  grunt.loadNpmTasks(‘grunt-contrib-watch‘);
  grunt.loadNpmTasks(‘grunt-contrib-concat‘);

  grunt.registerTask(‘test‘, [‘jshint‘, ‘qunit‘]);

  grunt.registerTask(‘default‘, [‘jshint‘, ‘qunit‘, ‘concat‘, ‘uglify‘]);

};

第五步：初始化项目文件（命令：npm init）会自动生成一个文件package.json(一定要注意，这个命令行需要切换到刚创建的文件夹里面)

　　mac切换方法：cd 文件路径

　　window：直接在该文件夹下右键打开命令行窗口

　　package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

第六步：安装任务插件（命令行输入下列对应的命令）

 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝常用的grunt插件＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

grunt-contrib-concat

非常常用的grunt插件，用于合并任意文件，用法也非常简单：

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

grunt.loadNpmTasks(‘grunt-contrib-concat‘);

（后面的插件演示就不再贴安装插件和注册插件的代码，大同小异。）

任务：合并src下的js文件到build目录，合并后文件名为built.js。

grunt.initConfig({
        concat: {
            options: {
                //2个js文件的内容部分的分隔符
                separator: ‘;‘
            },
            dist: {
                src: [‘src/*.js‘],
                dest: ‘build/built.js‘
            }
        }
    });

grunt前端代码管理工具的使用方法（by_shiyou）

标签：

原文地址：http://www.cnblogs.com/shiyou00/p/5660599.html