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

How to properly minify/combine CSS/JS in web projects with url rewriting

本文关键字:JS CSS 重写 url 项目 正确地 缩小 组合 网页      更新时间:2023-09-26

我已经挣扎了好几个小时,试图设置适当的缩小功能来重写url。我使用过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的一部分降落,现在它在我的根目录中,所以路径将从根目录指向/font/bootstrap_font.ttf。原始目录层次结构保持不变,所以我基本上想把这个url重写为/vendor/bootstrap/font/bootstrap_font.ttf

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

更新这是我当前的咕哝文件:

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错误,它不起作用——无法接受许多文件。

好吧,当我开始用grunt构建css和js时,我肯定也遇到了同样的问题。以下是我对"相对URL"问题的解决方案。请注意,这篇文章不是在回答你的实际问题,而是提供了另一种解决问题的方法。我有更多的嵌套文件夹结构,但它对我来说很好,希望它能帮助你。

要点是将所有css/js构建到另一个文件夹,并将资产文件复制到这个新文件夹。让我们给它起一个"构建"的名字:

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

使用grunt contrib复制插件将所有资产复制到/build/assets目录,而不会破坏它们的原始结构。因此,css保存的相对过程中,字体仍然存在/字体/文件夹。

使用这种方法将面临的问题是保存资产的文件夹结构。好吧,它是通过在gruntfile中取消构建配置来解决的。现在,您不能说"好吧,grunt,将所有/**/*.css文件构建到application.css",而是必须针对不同的文件结构选项描述不同的情况。如果您的项目具有明显且合乎逻辑的文件结构,则添加它们并不复杂。

我使用的规则是,每个css文件都必须有assets目录作为其同级文件。所以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

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

希望,这能帮助您