使用Grunt和重写路径处理相关文件 [英] Handle dependent files with Grunt and rewrite paths

问题描述

这是我的 Gruntfile.js （ assets 是 Bower folder）：

  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 /

提前感谢！

使用以下代码，所有资源url将使用绝对URL重写。

  cssmin：{
选项：{
 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选项设置为基本路径您的输入文件。在你的case我相信你应该设置根选项为/或

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

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

/

/ assets

/ other_files

/ distarily

This is my Gruntfile.js (assets is the Bower folder):

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']);
};

All works fine, but as I suspected, Font-awesome will lose it's connection with its fonts when using grunt-contrib-mincss.

Can I automate with Grunt that it will do something like;

• Copy font files from assets/font-awesome/fonts/ to dist/fonts/
• Rewrite url(../fonts/ to url(fonts/

Thanks in advance!

解决方案

fonts, images, @imports in bower components or vendors may be relative or absolute depend on the component itself, you should config your cssmin task to rewrite relative resources to a correct path in dist path. using following code, all resources urls will be rewritten using absolute urls.

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',
            ]
        }
    }
}

it's important to set the root option to the base path of your input files. in your case I'm believe you should set the root option to "/" or ""

If you tell me your project structure, I can help more.

I though your project structure is something like this

/
/assets
/other_files
/dist

这篇关于使用Grunt和重写路径处理相关文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！