星空网 > 软件开发 > Java

前端打包工具grunt快速入门(大篇幅完整版)

打包的目的和意义就不用叙述了直接上干货

http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行。本文将grunt打包的常用方法都用实例描述,更加清晰易懂。

 

1.    第一个简单的grunt打包


 1)需要安装nodejs:http://www.cnblogs.com/chuaWeb/p/nodejs-npm.html

  本人的nodejs工程目录为F:\chuaNodejs(后续所有相对路径都是相对于这个目录)

2)命令行到nodejs目录(需要系统管理员权限,不然后续过程中会报错)执行npm install -g grunt-cli

3)在nodejs工程目录下建一个package.json,内容为

{ "name": "my-first-grunt", "file": "jquery", "version": "0.1.0", "devDependencies": {  "grunt": "~0.4.5",  "grunt-contrib-jshint": "~0.10.0",  "grunt-contrib-nodeunit": "~0.4.1",  "grunt-contrib-uglify": "~0.5.0" }}

  其中file属性在Gruntfile.js中要用到的属性,打包源名称

  然后将devDependencies下面的包给下载下来,比如下载grunt: npm install grunt --save-dev 其他包下载方式一样

  需要注意的是package.json中的数据必须是严格的json数据格式(连添加注释都是不可以的)。

4) 在nodejs工程目录下建一个Gruntfile.js,内容为

 1 module.exports = function (grunt) { 2  // 项目配置 3  grunt.initConfig({ 4   pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中 5   uglify: { 6    options: { 7     banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' 8    }, 9    build: {10     src: 'src/<%=pkg.file %>.js',11     dest: 'dest/<%= pkg.file %>.min.js'12    }13   }14  });15  // 加载提供"uglify"任务的插件16  grunt.loadNpmTasks('grunt-contrib-uglify');17  // 默认任务18  grunt.registerTask('default', ['uglify']);19 }

  里面pkg读取package.json文件,然后可以访问其内容中的属性,如pkg.file。build属性src是待压缩的文件,dest是压缩重定向到该文件。

  所以现在我要建立一个src目录,目录下面保存了一个叫做jquery.js的文件

5)命令行运行:grunt

  输出

Running “uglify:build” (uglify) taskFile dest/jquery.min.js created: 277.14 kB ->93.35 kB>> 1 file created. Done.

  创建了dest/jquery.min.js

  前端打包工具grunt快速入门(大篇幅完整版)

  注意:grunt命令和grunt uglify等价。当然也可以带上任务名称default:grunt default能等到同样结果。

6)总结:

  grunt.initConfig:

  为当前项目初始化一个配置对象,其中传入的 configObject 参数可以用在后续的task中,可以通过grunt.config 方法访问。几乎每个项目的 Gruntfile 都会调用此方法。

  注意,任何 <% %> 模板字符串只会在取到配置数据后才被处理。

  不同的插件有各自的参数,比如例子中的uglify插件用到的参数有options和build。详细信息需要参考各个插件。

  initConfig详情参考:http://www.gruntjs.net/api/grunt.config#grunt.config.init

 

  grunt.loadNpmTasks:

  grunt打包主要是用到各种插件,比如上面的压缩用的插件uglify。加载插件需要使用该方法。

  从指定的 Grunt 插件中加载任务。此插件必须通过npm安装到本地,并且是参照 Gruntfile.js 文件的相对路径。

  详情参考:http://www.gruntjs.net/api/grunt.task#grunt.task.loadnpmtasks

 

  grunt.registerTask:

  注册 "别名任务" 或 任务函数。此方法支持以下两种类型:

  别名任务(如果指定了一个任务列表,那么,新注册的任务将会是这一个或多个任务的别名(alias)。当此"别名任务"执行时,taskList中的所有任务都将按指定的顺序依次执行。taskList 参数必须是一个任务数组。):grunt.task.registerTask(taskName, taskList)

  上面的例子就是别名任务。定义一个"default" 任务,当执行 Grunt 且不通过参数指定任务时,第二个参数中的任务将依序执行

  任务函数(如果传入description和taskFunction,每当任务运行时,指定的函数(taskFunction)都会被执行。此外,当执行 grunt --help时,前面指定的描述(description)就会显示出来。特定任务的属性和方法在任务函数内部通过this对象的属性即可访问。如果任务函数返回false表示任务失败。):grunt.task.registerTask(taskName, description, taskFunction)

  下一个例子我们就试一下这个任务函数,现在刚才例子每一个步骤目的就清晰了。

  详情参考:http://www.gruntjs.net/api/grunt.task#grunt.task.registertask

 

2. 使用任务函数方式实现刚才的那个打包。


  其他的东西都没有变,Gruntfile.js变成了

 1 module.exports = function (grunt) { 2  // 加载提供"uglify"任务的插件 3  grunt.loadNpmTasks('grunt-contrib-uglify'); 4  // 任务函数 5  grunt.registerTask('build', 'uglify 使用 任务函数版', function () { 6   //任务列表 7   var tasks = ['uglify']; 8   // 项目配置 9   grunt.initConfig({10    pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中11   });12   var uglifyTask = {13    options: {14     banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'15    },16    build: {17     src: 'src/<%=pkg.file %>.js',18     dest: 'dest/<%= pkg.file %>.min.js'19    }20   }21   //将一个或多个任务放入队列中22   grunt.task.run(tasks);23   //给当前项目的 Grunt 配置中的uglify属性设置一个值。24   grunt.config.set("uglify", uglifyTask);25  });26 }

  然后去命令行运行: grunt bulid

  和第一个不同的是运行命令必须带上了任务名称build。

  注意前面提到的任何 <% %> 模板字符串只会在取到配置数据后才被处理。

 

3. 合并压缩


  有些时候为了减少请求需要合并多个文件,且需要压缩。使用uglify即可做到这一点。

  Gruntfile.js代码

 1 module.exports = function (grunt) { 2  // 项目配置 3  grunt.initConfig({ 4   pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中 5   uglify: { 6    options: { 7     banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',//压缩目标文件头部注释 8     mangle: false//变量和函数名称不压缩 9    },10    my_target: {//该对象名称随意11     files: {12      'dest/libs.min.js': ['src/jquery.js', 'src/router.js']13     }14    }15   }16  });17  // 加载提供"uglify"任务的插件18  grunt.loadNpmTasks('grunt-contrib-uglify');19  // 默认任务20  grunt.registerTask('default', ['uglify']);21 }

  文件压缩的顺序按照files中定义的数组的顺序压缩。我们可以通过options.mangle来设置变量和函数名称是否压缩。还可以有下面的用法

1 options: {2  banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',//压缩目标文件头部注释3  mangle: {4   except: ["jQuery"]//不压缩的关键字列表5  }6 }

  最终jquery.js和router.js合并压缩成libs.min.js

  详情参考:https://www.npmjs.com/package/grunt-contrib-uglify

 

4. 合并压缩require配置的文件。


  首先需要下载grunt-contrib-requirejs插件:npm install grunt-contrib-requirejs --save-dev

  比如我们的执行文件main.js使用的是require来模块化加载,代码如下

 1 require.config({ 2  baseUrl: "", 3  paths: { 4   "jquery": "src/jquery", 5   "bootstrap": "src/bootstrap.min", 6   "validator": "src/bootstrapValidator.min" 7  }, 8  shim: { 9   "bootstrap":["jquery"],10   "beyond": ["bootstrap"],11   "validator": ["bootstrap"]12  }13 });14 requirejs(['validator'], function (v) {15  //代码16 });

  我们希望jquery/bootstrap/validator几个文件合并成一个,避免多次请求。

  我们新建一个grunt配置文件gruntCfg.json将main.js的require文件配置代码段拷贝到这个配置文件。并写入输入输出目标。源码如下

 1 { 2  "requirejs": { 3   "main": { 4    "options": { 5     "baseUrl": "", 6     "paths": { 7      "jquery": "src/jquery", 8      "bootstrap": "src/bootstrap.min", 9      "validator": "src/bootstrapValidator.min"10     },11     "shim": {12      "bootstrap":["jquery"],13      "validator": ["bootstrap"]14     },15     "include":["validator","jquery","bootstrap"],16     "out":"dest/libs.js"17    }18   }19  }20 }

  上面include中我打乱了顺序,为了测试压缩顺序我在三个库的前面都添加了console.log(“我是” + 模块名称)。

  修改Gruntfile.js

 1 module.exports = function (grunt) { 2  grunt.loadNpmTasks('grunt-contrib-requirejs'); 3  //为了介绍自定义任务搞了一个这个 4  grunt.registerTask('build', 'require', function () { 5  6   //设置requireJs的信息 7   var taskCfg = grunt.file.readJSON('gruntCfg.json'); 8   var requireTask = taskCfg.requirejs; 9 10   //添加人任务列表11   grunt.task.run(['requirejs']);12   grunt.config.set("requirejs", requireTask);13  });14 }

  好了现在看一下相关文件的文件结构如下

  前端打包工具grunt快速入门(大篇幅完整版)

  执行build任务:grunt build

  文件夹dest下多了一个libs.js文件

  前端打包工具grunt快速入门(大篇幅完整版)

  打开来看

  前端打包工具grunt快速入门(大篇幅完整版)

  第一行代码就有我刚才添加的console。继续找我添加的标志的话发现压缩顺序是:jQuery->bootstrap->bootstrapValidator。和我们的shim依赖顺序一致。说明合并压缩的顺序没有问题。

  更多详情请查看:https://www.npmjs.com/package/grunt-contrib-requirejs

 

5. 多任务


  我们先看一下使用别名任务来执行多个任务的情况,Gruntfile.js源码如下

 1 module.exports = function (grunt) { 2  // 项目配置 3  grunt.initConfig({ 4   pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中 5   uglify: { 6    options: { 7     banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' 8    }, 9    build: {10     src: 'src/<%=pkg.file %>.js',11     dest: 'dest/<%= pkg.file %>.min.js'12    },13    my_target1: {14     files: {15      'dest/libs.min.js': ['src/jquery.js', 'src/router.js']16     }17    },18    my_target2: {19     files: {20      'dest/libs.min2.js': ['src/jquery.js', 'src/router.js']21     }22    }23   },24   requirejs: {25    "main": {26     "options": {27      "baseUrl": "",28      "paths": {29       "jquery": "src/jquery",30       "bootstrap": "src/bootstrap.min",31       "validator": "src/bootstrapValidator.min"32      },33      "shim": {34       "bootstrap":["jquery"],35       "validator": ["bootstrap"]36      },37      "include":["validator","jquery","bootstrap"],38      "out":"dest/libs.js"39     }40    },41    "main2": {42     "options": {43      "baseUrl": "",44      "paths": {45       "jquery": "src/jquery",46       "bootstrap": "src/bootstrap.min",47       "validator": "src/bootstrapValidator.min"48      },49      "shim": {50       "bootstrap":["jquery"],51       "validator": ["bootstrap"]52      },53      "include":["validator","jquery","bootstrap"],54      "out":"dest/libs2.js"55     }56    }57   }58 59  });60  // 加载提供"uglify"任务的插件61  grunt.loadNpmTasks('grunt-contrib-uglify');62  grunt.loadNpmTasks('grunt-contrib-requirejs');63  // 默认任务64  grunt.registerTask('default', ['uglify',"requirejs"]);65 }

  执行:grunt

  dest文件夹下多出了5个文件

  前端打包工具grunt快速入门(大篇幅完整版)

  源码解析是:任务列表有两个任务'uglify'和"requirejs",'uglify'有三个子任务:build/ my_target1/ my_target2, "requirejs"有两个子任务main/main2。最终这五个子任务完成后生成的结果就是dest下多出的5个文件。

 

  还可以使用任务函数方式注册多个任务。Gruntfile.js源码如下

 1 module.exports = function (grunt) { 2  grunt.initConfig({ 3   log: { 4    l1: [1,2,3], 5    l2: 'hello world', 6    l3: false, 7    l4: {name: "chua"}, 8    l5: 1, 9    //这个是不行的l6: undefined,10    //这个是不行的l7: null11    l8: function(){alert("test")}12   }13  });14 15  grunt.registerMultiTask('log','log stuff.', function(){16    grunt.log.writeln(this.target + ': ' + this.data);17  });18 }

  执行:grunt log

  前端打包工具grunt快速入门(大篇幅完整版)

 

  我们使用自定义方式实现先前的多任务Gruntfile.js源码如下

 1 module.exports = function (grunt) { 2  // 项目配置 3  grunt.initConfig({ 4   pkg: grunt.file.readJSON('package.json'),//获取解析package.json将内容保存在pkg中 5   log: { 6    uglify: { 7     options: { 8      banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' 9     },10     build: {11      src: 'src/<%=pkg.file %>.js',12      dest: 'dest/<%= pkg.file %>.min.js'13     },14     my_target1: {15      files: {16       'dest/libs.min.js': ['src/jquery.js', 'src/router.js']17      }18     },19     my_target2: {20      files: {21       'dest/libs.min2.js': ['src/jquery.js', 'src/router.js']22      }23     }24    },25    requirejs: {26     "main": {27      "options": {28       "baseUrl": "",29       "paths": {30        "jquery": "src/jquery",31        "bootstrap": "src/bootstrap.min",32        "validator": "src/bootstrapValidator.min"33       },34       "shim": {35        "bootstrap":["jquery"],36        "validator": ["bootstrap"]37       },38       "include":["validator","jquery","bootstrap"],39       "out":"dest/libs.js"40      }41     },42     "main2": {43      "options": {44       "baseUrl": "",45       "paths": {46        "jquery": "src/jquery",47        "bootstrap": "src/bootstrap.min",48        "validator": "src/bootstrapValidator.min"49       },50       "shim": {51        "bootstrap":["jquery"],52        "validator": ["bootstrap"]53       },54       "include":["validator","jquery","bootstrap"],55       "out":"dest/libs2.js"56      }57     }58    }59   }60  });61  // 加载提供"uglify"任务的插件62  grunt.loadNpmTasks('grunt-contrib-uglify');63  grunt.loadNpmTasks('grunt-contrib-requirejs');64  65  grunt.registerMultiTask('log','log stuff.', function(){66   if(this.target == "uglify"){67    //添加人任务列表68    grunt.task.run(['uglify']);69    grunt.config.set("uglify", this.data);70   }else if(this.target == "requirejs"){71    //添加人任务列表72    grunt.task.run(['requirejs']);73    grunt.config.set("requirejs", this.data);74   }75  });76 }

  执行:grunt log

  照样得到先前的结果

  前端打包工具grunt快速入门(大篇幅完整版)

  说到底和先前的别名任务没有什么不同。

 

6. 压缩整个文件夹下的js文件


  压缩src下的所有js文件,Gruntfile.js源码

 1 module.exports = function (grunt) { 2  grunt.initConfig({ 3   uglify: { 4    my_target: { 5     files: [{ 6      expand: true, 7      cwd: 'src', 8      src: '**/*.js', 9      dest: 'dest'10     }]11    }12   }13  });14  grunt.loadNpmTasks('grunt-contrib-uglify');15  grunt.registerTask('default', ['uglify']);16 }

  源码文件结构(注意src/router下面还有一个js文件)

  前端打包工具grunt快速入门(大篇幅完整版)

  执行:grunt

  目标文件结构

  前端打包工具grunt快速入门(大篇幅完整版)

  所以这个方法还是比较方便的,他会遍历源文件夹下的所有文件(包括子文件夹)然后压缩。

 

  刚才上面的方式没有拷贝src文件夹,下面这种方式拷贝了src文件夹

 1 module.exports = function (grunt) { 2  grunt.initConfig({ 3   uglify: { 4    my_target: { 5     files: [{ 6      expand: true, 7      //cwd: 'src', 8      src: 'src/**/*.js', 9      dest: 'dest'10     }]11    }12   }13  });14  grunt.loadNpmTasks('grunt-contrib-uglify');15  grunt.registerTask('default', ['uglify']);16 }

  执行:grunt

  目标文件结构变成

  前端打包工具grunt快速入门(大篇幅完整版)

  src下所有的js都被压缩并保持原来的目录结构。

 

7. grunt-contrib-requirejs插件的更详细使用


  我们用实例来说明。现在我们的文件结构是这样子的

  前端打包工具grunt快速入门(大篇幅完整版)

  main.js是我们使用require的真实配置文件,源码如下

 1 require.config({ 2  baseUrl: "", 3  paths: { 4   "jquery": "src/jquery", 5   "bootstrap": "src/bootstrap.min", 6   "validator": "src/bootstrapValidator.min" 7  }, 8  shim: { 9   "bootstrap":["jquery"],10   "beyond": ["bootstrap"],11   "validator": ["bootstrap"]12  }13 });14 requirejs(['validator'], function (v) {15  //代码16 });

  Gruntfile.js的源码

 1 module.exports = function (grunt) { 2  grunt.initConfig({ 3   "requirejs": { 4    "main": { 5     "options": { 6      "baseUrl": ".", 7      "mainConfigFile": "main.js",//指定配置文件 8      "name": "test",//会将对应的文件压缩到main.js依赖的文件的前面压缩。但是会在main.js非依赖文件后面压缩(比如router.js) 9      "include":["jquery","bootstrap","validator","src/router/router.js"],//要压缩在一起的文件(会包括name对应的文件)10      "out":"dest/libs.js"11     }12    }13   }14  });15  grunt.loadNpmTasks('grunt-contrib-requirejs');16  grunt.registerTask('default', ['requirejs']);17 }

  需要说明的是name指定的文件内容会在main.js配置的依赖文件压缩之前压缩,但是如果include中还包含其他非main.js依赖的文件,则会在main.js非依赖文件后面压缩。

  我们的test.js源码为

1 console.log("这是我随便测试用的一个js");

  然后我们执行:grunt

  结果在dest下生成一个libs.js压缩文件

  前端打包工具grunt快速入门(大篇幅完整版)

  并且这个文件里面包含的压缩文件的顺序是:router.js->test.js->jquery.js-> bootstrap.min.js-> bootstrapValidator.min.js。

  所以说配置include中文件会依序压缩到libs.js,但是main.js依赖的文件会放在最后(依赖会逐层往上查找依赖),而name指定的文件会在非依赖文件之后依赖文件之前压缩。

 

  require模板文件打包

  模板文件使用到require工程上的text.js文件,路径:http://github.com/requirejs/text

  我们这里建立一个模板文件test.html

1 <!DOCTYPE html>2 <html>3 <head>4  <title>test</title>5 </head>6 <body>7 </body>8 </html>

  实际上现在test.html没有用到任何模板相关的运用,我们只是做打包例子,所以不管其他,我们只需要知道模板文件一般是html文件即可

  现在工程的文件结构是

  前端打包工具grunt快速入门(大篇幅完整版)

  Gruntfile.js的源码为

 1 module.exports = function (grunt) { 2  grunt.initConfig({ 3   "requirejs": { 4    "main": { 5     "options": { 6      baseUrl: ".", 7      paths: { 8       "jquery": "src/jquery", 9       "bootstrap": "src/bootstrap.min",10       "validator": "src/bootstrapValidator.min",11       "text": "text"//引入requirejs项目下解析模板引擎12      },13      shim: {14       "bootstrap":["jquery"],15       "beyond": ["bootstrap"],16       "validator": ["bootstrap"]17      },18      "include":["jquery","bootstrap","validator","text!test.html"],     "out":"dest/libs.js"19     }20    }21   }22  });23  grunt.loadNpmTasks('grunt-contrib-requirejs');24  grunt.registerTask('default', ['requirejs']);25 }

  执行命令行:grunt

  dest文件下多了一个libs.js,查看其中是否有模板文件test.html中的内容

  前端打包工具grunt快速入门(大篇幅完整版)

  说明模板被一同压缩进去了。关键是"text!test.html"这句话。test会将模板test.html解析成js脚本形式。

 

8.  cssmin打包样式文件


  需要用npm下载cssmin插件:npm install grunt-contrib-cssmin --save-dev

  Gruntfile.js文件源码

 1 module.exports = function (grunt) { 2  grunt.initConfig({ 3   cssmin: { 4    compress: { 5     files: { 6      'dest/t.min.css': ["src/t1.css","src/t2.css"] 7     } 8    } 9   }10  });11 12  grunt.loadNpmTasks('grunt-contrib-cssmin');13 14 }

  命令行执行:grunt cssmin

  两个css文件压缩打包到dest/t.min.css

 

9. htmlmin打包html文件


  需要用npm下载cssmin插件:npm install grunt-contrib-htmlmin --save-dev

  Gruntfile.js源码

 1 module.exports = function (grunt) { 2  grunt.initConfig({  3   htmlmin: { 4    main: { 5     options:{ 6      removeComments: true, 7      collapseWhitespace: true 8     }, 9     files:{10      "dest/test.html": "test.html"11     }12    }13   }14  });15 16  grunt.loadNpmTasks('grunt-contrib-htmlmin');17  grunt.registerTask("default",["htmlmin"]);18 }

  执行命令:grunt

  test.html压缩到dest/test.html

  

10. copy拷贝文件


  需要下载copy插件npm install grunt-contrib-copy --save-dev

  将src文件夹(包括内容和子文件内容)拷贝到dest目录下,Gruntfile.js源码

 1 module.exports = function (grunt) { 2  grunt.initConfig({  3   copy: { 4    main: { 5     expand: true, 6     src: 'src/**', 7     dest: 'dest/' 8    } 9   }10  });11 12  grunt.loadNpmTasks('grunt-contrib-copy');13  grunt.registerTask("default",["copy"]);14 }

  运行:grunt

  src被完美的拷贝到dest下

   前端打包工具grunt快速入门(大篇幅完整版)

 

  只拷贝src的第一层子文件,Gruntfile.js源码

 1 module.exports = function (grunt) { 2  grunt.initConfig({  3   copy: { 4    main: { 5     expand: true, 6     src: 'src/*', 7     dest: 'dest/' 8    } 9   }10  });11 12  grunt.loadNpmTasks('grunt-contrib-copy');13  grunt.registerTask("default",["copy"]);14 }

  运行结果

  前端打包工具grunt快速入门(大篇幅完整版)

  这个时候router是空文件夹。

  所以这里我们需要明白路径中“*”只表示当前这一层,“**”表示需要递归子文件夹   

 

  如果只是拷贝src中的内容而不用src包裹则需要cwd属性

 1 module.exports = function (grunt) { 2  grunt.initConfig({  3   copy: { 4    main: { 5     expand: true, 6     cwd: "src/", 7     src: '*',//也可以是数组形式["*"],可以过滤多种类型 8     dest: 'dest/' 9    }10   }11  });12 13  grunt.loadNpmTasks('grunt-contrib-copy');14  grunt.registerTask("default",["copy"]);15 }

  执行结果是

  前端打包工具grunt快速入门(大篇幅完整版)

  注意下面这种写**报错

module.exports = function (grunt) { grunt.initConfig({   copy: {   main: {    expand: true,    cwd: "src",    src: '/*',//会报错,不能以/开头,会被认为是绝对路径    dest: 'dest/'   }  } }); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask("default",["copy"]);}

 

  拷贝src文件夹下指定类型的文件,Gruntfile.js源码

module.exports = function (grunt) { grunt.initConfig({   copy: {   main: {    expand: true,    src: 'src/*.js',    dest: 'dest/'   }  } }); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask("default",["copy"]);}

  执行:grunt

  结果src的js文件随src文件夹被拷贝

  前端打包工具grunt快速入门(大篇幅完整版)

 

  递归拷贝src文件夹下所有子文件夹中的js文件

 1 module.exports = function (grunt) { 2  grunt.initConfig({  3   copy: { 4    main: { 5     expand: true, 6     src: 'src/**/*.js', 7     dest: 'dest/' 8    } 9   }10  });11 12  grunt.loadNpmTasks('grunt-contrib-copy');13  grunt.registerTask("default",["copy"]);14 }

  执行结果

  前端打包工具grunt快速入门(大篇幅完整版)

 

  将所有指定类型的文件提取到同一层,Gruntfile.js源码

 1 module.exports = function (grunt) { 2  grunt.initConfig({  3   copy: { 4    main: { 5     flatten: true,//所有文件提取到dest下 6     expand: true, 7     src: 'src/**/**.js', 8     dest: 'dest/' 9    }10   }11  });12 13  grunt.loadNpmTasks('grunt-contrib-copy');14  grunt.registerTask("default",["copy"]);15 }

  执行结果

  前端打包工具grunt快速入门(大篇幅完整版)

  我们发现router/router.js被提取到了目标目录下,这也是flatten的作用

 

11. 总结


  总的来说grunt压缩打包都是基于插件,各种插件的作用可以查看官网文档。

  在运行任务函数指定的任务的时候可以通过冒号分割来传递参数。比如下面的例子

module.exports = function (grunt) { //为了介绍自定义任务搞了一个这个 grunt.registerTask('test', '任务函数实例', function (arg1, arg2) {  if (arguments.length === 0) {   grunt.log.writeln(this.name + " 没有参数");  } else {   var join = Array.prototype.join;   grunt.log.writeln(this.name + " 的参数有" + join.call(arguments,","));  } });}

  执行:grunt test

  打印:

Runing “test” tasktest 没有参数

  执行:grunt test:1

  打印:

Runing “test:1” (test) tasktest 的参数有1

  执行:grunt test:1:2

  打印:

Runing “test:1:2” (test) tasktest 的参数有1,2

  正常来说我们的html/css/js文件都是用不同的文件夹保存的,所以我们可以分成三种任务来处理。这些任务都可以配置在一起,最后一次性打包,这部分根据各自实际项目情况来处理。

  ok,如果你从头到尾看完并把上面的实例执行,那么grunt的基本功能就没有问题了。更多的需要看具体的插件使用了。

  

  码字不容易,求推荐。

  如果觉得本文不错,请点击右下方【推荐】!

 




原标题:前端打包工具grunt快速入门(大篇幅完整版)

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

网络星:https://www.goluckyvip.com/tag/792.html
疫情冲击:https://www.goluckyvip.com/tag/7920.html
Shopee GMV:https://www.goluckyvip.com/tag/7921.html
Shope海外仓:https://www.goluckyvip.com/tag/7922.html
什么是SLS:https://www.goluckyvip.com/tag/7923.html
跨境大事件:https://www.goluckyvip.com/tag/7924.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
23点聊电商:“潮起钱塘·境遇未来”2024年跨境电商全平台发展大会圆满完成 :https://www.kjdsnews.com/a/1836652.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流