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使用相对网址引用字体文件 - 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构建到另一个文件夹并相对于此新文件夹复制资源文件。让它为“build”命名：

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

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

使用此方法遇到的问题是保存资产的文件夹结构。好吧，它是通过你的gruntfile中的构建配置的detalization来解决的。现在你不能说“okay grunt，将所有/**/*.css文件构建到application.css”，但必须为文件结构的不同选项描述不同的情况。如果您的项目具有明显的逻辑文件结构，则添加它们并不复杂。

我使用规则，每个css文件必须具有资产目录，因为它的兄弟。所以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

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

希望，这有助于你

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

1 个答案: