grunt学习笔记1 理论知识

标签：

你需要检查js语法错误，然后再去压缩js代码。如果这两步你都去手动操作，会耗费很多成本。
Grunt就能让你省去这些手动操作的成本。

“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。看到“开发依赖项”这一次，是不是觉得有些眼熟？
上文在配置package.json时，其中的“devDependencies”中就会存储开发依赖项。

下面就是一些常有grunt开发依赖插件

Contrib-jshint——javascript语法错误检查；
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
karma——前端自动化测试工具

使用uglify插件（压缩javascript代码）
Uglify插件的功能就是压缩javascript代码。至于javascript代码压缩的必要和意义有很多，这里就不用说了
几乎每一个javascript类库或者框架，都有一个 **.min.js 压缩版。

“options”中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。
注意，其中使用到了pkg获取package.json的内容。
banner选项(用于在文件顶部生成一个注释)

npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行grunt命令了。

每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。

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

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

package.json应当放置于项目的根目录中，与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。

过npm install <module> --save-dev命令。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中，
遵循tilde version range格式。

build的uglify目标，用于将一个js文件压缩为一个目标文件。

只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：

通过定义 default 任务，可以让Grunt默认执行一个或多个任务。
这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。

src-dest(源文件-目标文件)文件映射的方式
所有的文件格式都支持src和dest属性
然这并不是一个综合的匹配模式方面的教程，你只需要知道如何在文件路径匹配过程中使用它们即可：

// 指定单个文件：
{src: ‘foo/this.js‘, dest: ...}
// 指定一个文件数组：
{src: [‘foo/this.js‘, ‘foo/that.js‘, ‘foo/the-other.js‘], dest: ...}
// 使用一个匹配模式：
{src: ‘foo/th*.js‘, dest: ...}

// 一个独立的node-glob模式：
{src: ‘foo/{a,b}*.js‘, dest: ...}
// 也可以这样编写：
{src: [‘foo/a*.js‘, ‘foo/b*.js‘], dest: ...}

// foo目录中所有的.js文件，按字母顺序排序：
{src: [‘foo/*.js‘], dest: ...}
// 首先是bar.js，接着是剩下的.js文件，并按字母顺序排序：
{src: [‘foo/bar.js‘, ‘foo/*.js‘], dest: ...}

// 除bar.js之外的所有的.js文件，按字母顺序排序：
{src: [‘foo/*.js‘, ‘!foo/bar.js‘], dest: ...}
// 按字母顺序排序的所有.js文件，但是bar.js在最后。
{src: [‘foo/*.js‘, ‘!foo/bar.js‘, ‘foo/bar.js‘], dest: ...}

// 模板也可以用于文件路径或者匹配模式中：
{src: [‘src/<%= basename %>.js‘], dest: ‘build/<%= basename %>.min.js‘}
// 它们也可以引用在配置中定义的其他文件列表：
{src: [‘foo/*.js‘, ‘<%= jshint.all.src %>‘], dest: ...}

使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描。
模板会被递归的展开，直到配置中不再存在遗留的模板相关的信息(与模板匹配的)。

concat: {
  options: {
    // 定义一个用于插入合并输出文件之间的字符
    separator: ‘;‘
  },
  dist: {
    // 将要被合并的文件
    src: [‘src/**/*.js‘],
    // 合并后的JS文件的存放位置
    dest: ‘dist/<%= pkg.name %>.js‘
  }
}

uglify: {
  options: {
    // 此处定义的banner注释将插入到输出文件的顶部
    banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘
  },
  dist: {
    files: {
      ‘dist/<%= pkg.name %>.min.js‘: [‘<%= concat.dist.dest %>‘]
    }
  }

最后设置了一些task。最重要的是default任务：
// 在命令行上输入"grunt test"，test task就会被执行。
grunt.registerTask(‘test‘, [‘jshint‘, ‘qunit‘]);

// 只需在命令行上输入"grunt"，就会执行default task
grunt.registerTask(‘default‘, [‘jshint‘, ‘qunit‘, ‘concat‘, ‘uglify‘]);

官方文档配置Grungfile.js
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‘]);

};

wrapper函数，这是Node.js的典型写法，使用exports公开API

grunt-contrib-thmlmin options属性
Options 选项

以下选项类型均为布尔型，默认值均为false。

removeComments

删除HTML注释

removeCommentsFromCDATA

删除<script>和<style>标签内的HTML注释

removeCDATASectionsFromCDATA

类型：布尔

默认：false

删除<script>和<style>标签中的CDTA区段

collapseWhitespace

删除文档树中文本节点的空白。不会影响重大的空白，比如在SCRIPT,STYLE,PRE或TEXTAREA等元素内容。

collapseBooleanAttributes

删除布尔属性

<input disabled="disabled"> => <input disabled>

removeAttributeQuotes

删除属性的引号，当安全的情况下。

removeRedundantAttributes

删除多余的属性，像type="text/javascript"。

useShortDoctype

用短的HTML5的<!DOCTYPE html>代替doctype

removeEmptyAttributes

删除空（或空白）属性

removeOptionalTags

一些元素允许省略标签，像</td>

removeEmptyElements

删除空元素

grunt学习笔记1 理论知识

标签：

原文地址：http://www.cnblogs.com/webHero/p/5762903.html