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

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

苏南大叔:如何定义 grunt 的文件复制和删除任务 - grunt-task-copy-clean
如何定义 grunt 的文件复制和删除任务(图2-1)

本文讲述的话题分为:文件复制copy、文件删除clean两部分。使用的grunt版本是v1.0.3grunt-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的参数说明,请参见这个链接:

文件清理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地址吧。如果有需要,可以去上面看看相关信息。

总结

苏南大叔:如何定义 grunt 的文件复制和删除任务 - gruntfile-copy-clean
如何定义 grunt 的文件复制和删除任务(图2-2)

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

newsn.net:这里是【评论】可见内容

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   grunt