我们先在项目里面添加几个要复制的文件 ... 在项目的根目录下,新建一个 index.html ... 在文件里添加一个基本的 html 结构 ...
打开 Gruntfile.js ... 下面我们去配置一下 grunt-contrib-copy 的 copy 这个任务 ... 让这个任务去把刚才创建的这些文件复制到一个指定的地方 ...
任务的配置,可以放到配置对象里,这里用一个 grunt 的 initConfig 这个方法 .. 给它一个对象参数 ... 然后先去添加一个 copy 属性 ... 因为 grunt-contrib-copy 这个插件的任务叫做 copy ...
它的值是一个对象 ... 现在我们打算先把项目根目录下的 index.html 这个文件复制到 dist 这个子目录里面 ... dist 表示 distribution ...
在这个 copy 对象里面,添加一个叫 html 的属性,属性的名字你可以随便定义 ... 这个属性就是 copy 这个任务的 target ... 它的值是一个对象 ... 在这个对象里 ... 可以添加两个属性,src ... 还有 dest ... src 属性的值,就是你想要处理的文件 ... 这里就是你要复制的文件 ... src 表示 source ... 中文是源的意思 ... dest 表示 destination .. 目的地的意思 ... 也就是你想要把处理好的文件放到的地方 ...
添加一个 src ... 它的值设置成 index.html ... 然后再添加一个 dest ... 它的值设置成 dist/ ...
保存 ... 打开命令行工具 ... 进入到项目所在的目录 ... 然后执行一下 copy 这个任务 ... 可以输入 grunt copy ... 在 copy 的后面我们也可以加上具体的目标 ... 也就是在配置对象里面跟任务同名属性下面定义的 ... 输入一个 :html ... 这样执行 copy 任务的时候,会根据 html 这个目标里的配置,去把 index.html 这个文件,复制到 dist 这个目录的下面 ...
grunt config:html
回到编辑器,你会发现,项目的根目录下面会多了一个 dist 目录 ... 在这个目录的下面有一个 index.html ... 这个文件就是从项目的根目录下面复制过来的 ...