如何正确缩小/组合Web项目中的CSS/JS与url重写

Question

我几个小时都在努力设置适当的缩小,实际上重写了网址.我已经使用了useref和usemin,他们可以很好地扫描html,聚合所有JS和CSS并输出到一个文件中.但是,对于我的生活,我不能让url重写正常工作.我的结构很简单:

\root
   index.html
   application.css       // minified
   application.js        // minified
   \vendor
       \bootstrap
           \fonts        // font files here
           bootstrap.css // pre-minified 

bootstrap.css通过使用相对url引用字体文件 - font/bootstrap_font.ttf 当bootstrap被缩小时,它作为应用程序css的一部分登陆,现在在我的root中,因此路径将从root指向/font/bootstrap_font.ttf.原始目录层次结构保持不变,所以我基本上希望将此url重写为/vendor/bootstrap/font/bootstrap_font.ttf

哦,为什么cssmin任务不接受多个文件？

更新 这是我当前的grunt文件:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        useminPrepare: {
            html: 'web/public/index.html',
            options: {
                dest: 'web/public-dist'
            }
        },
        usemin: {
            html: 'web/public-dist/index.html',
        },
        copy: {
            all: {
                files: [{
                    expand: true,
                    cwd: 'web/public/',
                    src: ['**'],
                    dest: 'web/public-dist/'
                }]
            },
            resources: {
                files: [{
                    expand: true,
                    cwd: 'web/public/',
                    src: ['**/*.*', '!**/*.js', '!**/*.css', '!**/*.txt'],
                    dest: 'web/public-dist/'
                }]
            }
        },
        uglify: {
            options: {
                mangle: true,
                sourceMap: false,
                compress: true,
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            standard: {
                files: [{
                    expand: true,
                    cwd: 'web/public-dist/',
                    src: ['**/*.js'],
                    dest: 'web/public-dist/'
                }]
            }
        },
        cssmin: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
            },
            standard: {
                files: [{
                    expand: true,
                    cwd: 'web/public-dist/',
                    src: ['**/*.css'],
                    dest: 'web/public-dist/'
                }]
            },
        }
    });

    grunt.registerTask('package', [ 'copy:resources', 'useminPrepare', 'concat:generated','cssmin:generated', 'uglify:generated', 'usemin']);
};

在这种形式中,cssmin甚至不能用作单独调用的目标,因为显然它的配置是错误的 - 它抱怨它不能接受许多文件.我在这做错了什么？

从我收集到的点点滴滴中,显然改变usemin流并且不允许它在以后连接所有css和cssmin是至关重要的 - 因为这样,它显然会丢失关于每个css文件的目录原点的重要信息.我已经尝试更改流程,但由于相同的cssmin错误它不起作用 - 无法接受许多文件.

Answer 1

好吧，当我开始用 grunt 构建我的 css 和 js 时，我肯定遇到了同样的问题。这是我对“相对网址”问题的解决方案。请注意，这篇文章并不是回答您的实际问题，而是提供另一种解决问题的方法。我有更多的嵌套文件夹结构，但它对我来说效果很好，希望它对您有所帮助。

要点是将所有 css/js 构建到另一个文件夹，并将资产文件相对于这个新文件夹复制。让我们为其命名“构建”：

\root
   \build
       application.css - minified
       application.js  - minified       
       \fonts
           ...
       \img
           ...
       ...
   index.html
   \ ...

使用grunt-contrib-copy插件将所有资产复制到 /build/assets 目录，而不破坏其原始结构。所以你的 css 保存的相对路径，字体仍然在 ./fonts/ 文件夹中。

使用这种方法时您将面临的问题是保存资产的文件夹结构。好吧，这个问题可以通过在 grunt 文件中详细化构建配置来解决。现在你不能说“好吧，将所有 /**/*.css 文件构建到 application.css”，而必须针对不同的文件结构选项描述不同的情况。如果您的项目具有明显且符合逻辑的文件结构，那么添加它们并不复杂。

我使用的规则是每个 css 文件都必须有 asset 目录作为它的同级文件。所以 gruntfile 仅扩展了几行，构建结构看起来像这样

\root
   \build
       \css
           \assets
               \fonts
               \img
           application.css - minified    //all relative passes saved
   \foo
       \bar
           \biz
               \assets
                   \fonts
               first.css
       \row
           \assets
               \img
           second.css
   index.html

显然，您必须有资产名称命名规则以防止覆盖文件。

希望这对你有帮助