告别重复劳动之javascript任务运行器(二) – 深入了解GRUNT

接上一篇:告别重复劳动之javascript任务运行器 - GRUNT安装教程(一)

今天我们来深入了解一下Grunt的目录结构

不出意外,每一个gurnt都会需要这两个文件,并且很可能就只有这两个文件(复杂的情况有所不同)

package.json这个文件用来存储npm模块的依赖项(比如我们的打包若是依赖requireJS的插件,这里就需要配置)然后,我们会在里面配置一些不一样的信息,比如我们上面的file,这些数据都会放到package中

对于package的灵活配置,我们会在后面提到

Gruntfile这个文件尤其关键,他一般干两件事情:① 读取package信息

② 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面)

Gruntfile一般由四个部分组成① 包装函数这个包装函数没什么东西,意思就是我们所有的代码必须放到这个函数里面module.exports =function(grunt) {//你的代码}这个不用知道为什么,直接将代码放入即可② 项目/任务配置我们在Gruntfile一般第一个用到的就是initConfig方法配置依赖信息pkg: grunt.file.readJSON('package.json')这里的 grunt.file.readJSON就会将我们的配置文件读出,并且转换为json对象然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了

值得注意的是这里使用的是underscore模板引擎,所以你在这里可以写很多东西

uglify是一个插件的,我们在package依赖项进行了配置,这个时候我们为系统配置了一个任务

uglify(压缩),他会干这几个事情:① 在src中找到zepto进行压缩(具体名字在package中找到)② 找到dest目录,没有就新建,然后将压缩文件搞进去③ 在上面加几个描述语言这个任务配置其实就是一个方法接口调用,按照规范来就好,暂时不予关注,内幕后期来这里只是定义了相关参数,但是并未加载实际函数,所以后面马上就有一句:grunt.loadNpmTasks('grunt-contrib-uglify');用于加载相关插件最后注册一个自定义任务(其实也是默认任务),所以我们下面的命令行是等效的:grunt == grunt uglify

至此,我们就简单解析了一番grunt的整个操作,下面来合并文件的例子

合并文件依赖于grunt-contrib-concat插件,所以我们的package依赖项要新增一项


"devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-jshint": "~0.6.3",
  "grunt-contrib-concat": "~0.3.0",
  "grunt-contrib-uglify": "~0.2.1",
  "grunt-contrib-requirejs": "~0.4.1",
  "grunt-contrib-copy": "~0.4.1",
  "grunt-contrib-clean": "~0.5.0",
  "grunt-strip": "~0.2.1"
},

然后再将代码写成这个样子


module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat']);
}

运行后,神奇的一幕发生了:

三个文件被压缩成了一个,但是没有压缩,所以,我们这里再加一步操作,将之压缩后再合并


module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    },
    uglify: {
      build: {
        src: 'dest/libs.js',
        dest: 'dest/libs.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默认任务
  grunt.registerTask('default', ['concat', 'uglify']);
}

我这里的做法是先合并形成一个libs,然后再将libs压缩成libs.min.js

所以我们这里换个做法,先压缩再合并,其实unglify已经干了这些事情了


module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      "my_target": {
        "files": {
          'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
}

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论