合并文件:grunt-contrib-concat

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在项目里有些文件你可能想要把它们合并成一个文件 ... 比如项目用的 css ... javascript ... 这个合并的任务,可能使用 grunt-contrib-concat 插件为做 ...

打开命令行 ... 先去安装一下这个插件 ...

npm install grunt-contrib-concat --save-dev

然后再打开 Gruntfile.js ... 这里再去加载一下刚才安装的 concat 插件 ...

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

这样我们就可以去执行 concat 任务去合并文件了 ... 比如在我的项目里, javascripts 这个目录下面,有一个 app.js ... 在 modules 目录还有一个 module.js ... 我们去配置一下,把这两个文件合并到一块儿 ... 然后把合并以后的 js 文件再放到 dist 目录下面的 javascripts 这个目录里面 ...

这些配置要在配置对象里去定义 ... 先添加一个跟任务同名的属性 ... 这里就是 concat ... 它的值是一个对象 ... 跟合并相关的选项可以放到一个 options 属性里面 ... 比如你可以设置合并文件的头部还有页脚部分的内容 ...

concat 是一个多任务 ... 所以我们可以定义多个目标 ... 比如这里我要做的是去合并 js 文件 ... 可以添加一个目标叫做 js ... 这个名字你可以随便定义,只要你认为合理就行 ...

它的值也是一个对象 ... 这里我们可以用一个 files 对象 ... 在这个对象里,你可以用目标: 源的形式,去设置合并以后的文件的位置,还有要合并的文件 ...

或者,我们也可以使用 src 属性,来定义要合并的文件 ... 然后用 dest 属性来定义合并以后的文件的路径 ...

先添加一个 src 属性 ... 它的值是一个数组 ... 数组里的项目就是要合并到一块儿的文件 ... 先是 javascripts 里面的 app.js ... 然后是 javascripts 下面的 modules 目录里面的 module.js ...

逗号分隔开 ... 再设置一下 dest 属性 ... 用它来指定一下合并以后的文件的路径 ... 把合并之后的文件,放到 dist 目录下面的 javascripts 这个目录里面 ... 合并之后的文件的名字可以设置成 app.js ...

保存 ... 再去执行一下这个任务 ... 回到命令行 ... 输入 grunt concat ... 执行这行命令,会执行 concat 任务里面的所有的目标 ... 我们也可以手工指定一个任务的目标 ... 用一个冒号 ... 然后输入刚才定义的 js 这个目标 ...

grunt concat:js

回车 ... 完成以后,再回到项目 ... 找到 dist ... javascripts ... 在这个目录下面的 app.js 就是合并以后的 js 文件 ... 在这个文件里面,包含了项目根目录下的 javascripts 目录里面的 app.js 还有子目录 modules 里面的 module.js 这两个文件的内容 ...

https://github.com/gruntjs/grunt-contrib-concat

合并文件:grunt-contrib-concat《 Grunt 自动化任务 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点