使用 Grunt 处理依赖文件并重写路径答案

【问题标题】：Handle dependent files with Grunt and rewrite paths使用 Grunt 处理依赖文件并重写路径
【发布时间】：2014-04-01 16:38:42
【问题描述】：

这是我的Gruntfile.js（assets 是Bower 文件夹）：

module.exports = function(grunt) {
    grunt.initConfig({
        distFolder: 'dist',
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';',
            },
            dist: {
                src: [
                    'assets/jquery/dist/jquery.js',
                    'assets/jquery-ui/ui/jquery-ui.js',
                    'assets/jsplumb/dist/js/jquery.jsPlumb-1.5.5.js'
                ],
                dest: '<%= distFolder %>/main.js',
            },
        },
        uglify: {
            dist: {
                src: 'dist/main.js',
                dest: 'dist/main.min.js',
            },
        },
        cssmin: {
            combine: {
                files: {
                    'dist/main.min.css': [
                        'assets/font-awesome/css/font-awesome.min.css',
                        'assets/jquery-ui/themes/base/jquery-ui.css',
                    ],
                }
            }
        },
    });

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

    grunt.registerTask('build', ['concat', 'uglify']);
};

一切正常，但正如我所怀疑的那样，Font-awesome 在使用grunt-contrib-mincss 时会失去与其字体的联系。

我可以使用 Grunt 自动执行类似的操作吗？

将字体文件从assets/font-awesome/fonts/复制到dist/fonts/
将url(../fonts/ 重写为url(fonts/

提前致谢！

【问题讨论】：

标签： css gruntjs font-awesome bower grunt-contrib-cssmin

【解决方案1】：

bower 组件或供应商中的字体、图像、@imports 可能是相对的或绝对的，取决于组件本身，您应该配置您的 cssmin 任务以将相关资源重写为 dist 路径中的正确路径。使用以下代码，所有资源 url 将使用绝对 url 重写。

cssmin: {
    options: {
        root: 'app'
    },
    combine: {
        files: {
            'dist/main.min.css': [
                'app/bower_components/lib1/main.css',
                'app/bower_components/jquery-ui/themes/base/jquery-ui.css',
            ]
        }
    }
}

将 root 选项设置为输入文件的基本路径很重要。在您的情况下，我相信您应该将 root 选项设置为“/”或“”

如果你告诉我你的项目结构，我可以提供更多帮助。

我虽然你的项目结构是这样的

/
/资产
/其他文件
/dist

【讨论】：