如何定义 grunt 的文件复制和删除任务

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

苏南大叔在本文中，讲述两个比较常见的grunt任务，一个是文件复制，另外一个是文件删除。使用场景上来说，就是比如一些css附带的资源文件，比如图片/字体等。因为使用grunt构建过的css，可能发生了路径上的变化。那么，一些资源引用就出现了偏差。这个时候，需要把这些资源文件，复制到对应的新位置上来。那么既然有复制copy，那么就会有clean操作。两者是相辅相成的。

本文讲述的话题分为：文件复制copy、文件删除clean两部分。使用的grunt版本是v1.0.3，grunt-cli版本是1.2.0，构建环境是win10。

由于编辑器正则匹配的bug，本文中代码中涉及的星星字样，实际上是两个*。读者请注意替换！

文件复制copy

需要npm安装的grunt插件是：grunt-contrib-copy。

npm install grunt-contrib-copy --save-dev

Gruntfile.js使用范例代码如下：

module.exports = function (grunt) {
    pkg: grunt.file.readJSON('package.json'),
            grunt.initConfig({
                copy: {
                    main: {
                        files: [
                            {expand: true, cwd: '../assets/img/', src: ['星星/*'], dest: 'img/'},
                            {expand: true, cwd: '../assets/fonts/', src: ['星星/*'], dest: 'fonts/'},
                            {expand: true, cwd: '../assets/lib_sunan/uptop/', src: ['rocket_button_up.png'], dest: 'dest/'},
                        ],
                    },
                },
            });
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.registerTask('default', ['copy']);
}

这里的copy任务的main.files节点，是比较难配置的地方。范例中，保留的一条，是苏南大叔认为最正确的配置方式。下面是几条类似配置方式对比：

{expand: true, src: ['../assets/img/**'], dest: 'img/'}

{expand: true, cwd: '../assets/img/', src: ['星星/*'], dest: 'img/'}

{expand: true, cwd: '../assets/lib_sunan/uptop/', src: ['rocket_button_up.png'], dest: 'dest/'}

上述第一条配置，会把所有文件复制到目标文件夹的根目录，也就是说，会丢失原本的目录结构。而第二条配置，是个比较正常的选择，会把所有文件保持目录结构复制过来。第三条配置就比较简单了，就复制一个文件而已。

当然，这里还有很多的变形，但是可能日常上也用不到罢了。更多copy的参数说明，请参见这个链接：

• https://github.com/gruntjs/grunt-contrib-copy

文件清理clean

因为copy就是个无脑复制，如何有一些文件被删除了。仅仅配置copy的话，就会导致被删除的文件在目标文件夹中，仍然得到保留。这显示并不是苏南大叔想要的。那么，这个时候，就需要配置clean操作了。

需要npm安装的grunt插件是：grunt-contrib-clean。

npm install grunt-contrib-clean --save-dev

Gruntfile.js使用范例代码如下：

module.exports = function (grunt) {
    pkg: grunt.file.readJSON('package.json'),
            grunt.initConfig({
                clean: [
                    'img/',
                    'fonts/',
                    'dest/rocket_button_up.png'
                ],
            });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('default', ['clean']);
}

clean任务的配置非常简单明了，所以，苏南大叔就不做复述了。大家看一眼就demo就可以瞬间明白。就简单的附上一个clean插件的github地址吧。如果有需要，可以去上面看看相关信息。

• https://github.com/gruntjs/grunt-contrib-clean

总结

clean和copy是紧密相连的两个定义。一般来说，要先clean，后copy。所以，最终可能的default任务可能是这样的：

更多grunt相关经验文章，请点击苏南大叔的博客：

• https://seosn.com/tag/grunt/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。