正确代码之-grunt

时间 2019-11-26

标签正确代码 grunt 栏目 Node.js 繁體版

原文原文链接

【grunt第一弹】30分钟学会使用grunt打包前端代码

前言

以如今前端js激增的态势，一个项目下来几十个js文件轻轻松松
对于复杂一点的单页应用来讲，文件上百简直是屡见不鲜，那么这个时候咱们的js文件应该怎么处理呢？
另外，对于css文件，又该如何处理呢？？
这些都是咱们实际工做中要遇到的问题，好比咱们如今框架使用zepto、backbone、underscore
咱们要如何将他们合成一个libs文件，这都是使人头疼的问题css

可是grunt的出现却让这些事情变得优雅起来！
简单一键，打包结束，尼玛不是不可能啊！html

grunt

是一套前端自动化工具，一个基于nodeJs的命令行工具，通常用于：
① 压缩文件
② 合并文件
③ 简单语法检查前端

对于其余用法，我还不太清楚，咱们这里简单介绍下grunt的压缩、合并文件node

初学，有误请包涵web

准备阶段

一、nodeJs环境

由于grunt是基于nodeJs的，因此首先各位须要安装nodeJS环境，这块咱们便无论了
http://www.cnblogs.com/yexiaochai/p/3527418.htmlexpress

二、安装grunt

有了nodeJs环境后，咱们即可以开始搞grunt了，由于咱们可能在任何目录下运行打包程序，因此咱们须要安装CLI
官方推荐在全局安装CLI（grunt的命令行接口）npm

npm install -g grunt-cli

这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，缘由是json

每次运行grunt时，它都会使用node的require查找本地是否安装grunt，若是找到CLI便加载这个本地grunt库
而后应用咱们项目中的GruntFile配置，并执行任务
PS：这段先不要管，安装完了往下看框架

实例学习：打包zepto

一些东西说多了都是泪，直接先上实例吧，实例结束后再说其它的
首先在D盘新建一个项目（文件夹就好）
在里面新增两个文件（不要问为何，搞进去先）函数

① package.json

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "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"
  },
  "dependencies": {
    "express": "3.x"
  }
}

② Gruntfile.js

完了咱们须要在grunt目录下执行 npm install将相关的文件下载下来：

$ cd d:
$ cd grunt

而后咱们的目录就会多一点东西：

多了不少东西，先别管事干什么的，咱们后面都会用到，这个时候在目录下新建src文件夹，而且搞一个zepto进去

而后在Gruntfile中新增如下代码（先别管，增长再说）

按 Ctrl+C 复制代码

而后运行 grunt命令后

grunt

嗯嗯，多了一个文件，而且是压缩的，不差！！！第一步结束

认识Gruntdile与package.json

不出意外，每个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']);
}

因此，咱们就暂时不去关注concat了

最后，今天时间不早了，咱们最后研究下grunt配合require因而便结束今天的学习吧

合并requireJS管理的文件

有了前面基础后，咱们来干一件平时很头疼的事情，即是将require管理的全部js文件给压缩了合并为一个文件
首先咱们创建一个简单的程序，里面使用了zepto、backbone、underscore（事实上我并未使用什么）

在main.js中新增代码：

require.config({
 baseUrl: '',
 shim: {
  $: {
      exports: 'zepto'
  },
  _: {
   exports: '_'
  },
  B: {
   deps: [
    '_',
    '$'
     ],
   exports: 'Backbone'
  }
 },
 paths: {
  '$': 'src/zepto',
  '_': 'src/underscore',
  'B': 'src/backbone'
 }
});
requirejs(['B'], function (b) {
});

这样的话运行会自动加载几个文件，咱们如今但愿将之合并为一个libs.js该怎么干呢？？？

咱们这里使用自定义任务方法来作，由于咱们好像没有介绍他

要使用requireJS相关须要插件

grunt.loadNpmTasks('grunt-contrib-requirejs');

由于咱们之后可能存在配置文件存在各个项目文件的状况，因此咱们这里将requireJs相关的配置放入gruntCfg.json中

这样咱们的package.json就没有什么实际意义了：

{
  "name": "demo",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "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"
 
  },
  "dependencies": {
    "express": "3.x"
  }
}

咱们这里设置的require相关的grunt配置文件以下（gruntCfg.json）：

{
  "requirejs": {
    "main": {
      "options": {
        "baseUrl": "",
        "paths": {
          "$": "src/zepto",
          "_": "src/underscore",
          "B": "src/backbone",
          "Test": "src/Test"
        },
        "web": {
          "include": [
            "$",
            "_",
            "B",
            "Test"
          ],
          "out": "dest/libs.js"
        }
      }
    }
  }
}

这里咱们要打包这些文件搞到dest的libs.js文件中，这个文件照作就行，最后核心代码以下：

module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  //为了介绍自定义任务搞了一个这个
  grunt.registerTask('build', 'require demo', function () {
    //任务列表
    var tasks = ['requirejs'];
    //源码文件
    var srcDir = 'src';
    //目标文件
    var destDir = 'dest';
    //设置参数
    grunt.config.set('config', {
      srcDir: srcDir,
      destDir: destDir
    });
    //设置requireJs的信息
    var taskCfg = grunt.file.readJSON('gruntCfg.json');
    var options = taskCfg.requirejs.main.options,
        platformCfg = options.web,
        includes = platformCfg.include,
        paths = options.paths;
    var pos = -1;
    var requireTask = taskCfg.requirejs;
    options.path = paths;
    options.out = platformCfg.out;
    options.include = includes;
    //运行任务
    grunt.task.run(tasks);
    grunt.config.set("requirejs", requireTask);
  });
}

搞完了运行就好：grunt build

grunt build

若是能帮到你，打赏我吧~