码迷,mamicode.com
首页 > 其他好文 > 详细

grunt

时间:2016-01-28 15:22:33      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

grunt能够自动执行配置好的任务
 
命令行:
切换根目录直接: f:
切换路径 cd cw
返回上一层 cd..
 
安装使用grunt:
npm install -g grunt-cli   安装
注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。每次运行grunt 时,他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt
 
取消操作 ctrl c 
 
package.json(此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。):
在package.json所在目录中运行npm install将依据package.json里指定的node依赖
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}
 
下面这条命令将安装Grunt最新版本到项目目录中,并将其添加到devDependencies内:
npm install grunt --save-dev
想用某个插件,先要添加依赖并然后安装好,才能在Gruntfile中加载使用。
 
 
 
Gruntfile(用来配置或定义任务(task)并加载Grunt插件的)组成结构:
 
接下来就可以定义每个任务的配置信息,每一个任务的配置对象作为grunt.initConfig({})的属性:
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),  // 从package.json中读取配置内容,然后就可以  pkg.version  来读取里面信息
    concat: {                                 //这里就定义了一个合并任务了
      options: {
        separator: ‘;‘                        //合并后每个被合并的文件之间的分割符号
      },
      dist: {
        src: [‘src/**/*.js‘],                //需要合并的文件,foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件;而foo/**/*js将匹配foo/目录以及其子目录中所有以.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 %>‘]           //把上面合并后的文件压缩到dist/地址下
        }
      }
    },
    qunit: {
      files: [‘test/**/*.html‘]                                  //测试运行的文件
    },
    jshint: {
      files: [‘Gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘],     //定义需要语法质量检测的文件
      options: {                                         
        globals: {                                              //这里可以覆盖掉jshint默认的选项,http://www.jshint.com/docs/
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {                                                      //监视任务,这里是监视和jshint相同的文件,如果这些文件发生了改变
      files: [‘<%= jshint.files %>‘],                            //它就会自动运行task里面指定的任务,按照出现的顺序执行
      tasks: [‘jshint‘, ‘qunit‘]
    }
  });
 
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);       //加载插件,这样上面才能完成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 test
 
  grunt.registerTask(‘default‘, [‘jshint‘, ‘qunit‘, ‘concat‘, ‘uglify‘]);   //默认被执行的任务,也就是只输入grunt的时候执行
};
 
grunt --help 命令将列出所有可用的任务。
 
 
任务配置和目标:
grunt.initConfig({
  concat: {
    options: {
      // 这里是任务级的Options,覆盖默认值 ,option是可选的
    },
    foo: {   //这时concat下的foo目标,如果需要只运行它,可以:grunt concat:foo
      options: {
        // 目标可以有option,会覆盖上一级
      },
    },
    bar: {
      // 不指定option的话,会使用上一级的option
    },
  },
});
 

grunt

标签:

原文地址:http://www.cnblogs.com/chuangweili/p/5166295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!