如何缩小不同文件夹中的css文件，以免出现路径问题？

Question

这是我的GruntJS cssmin脚本。

cssmin: {
  add_banner: {
    options: {
      banner: '/* Minified on <%= grunt.template.today("yyyy-mm-dd hh:MM:ss")%> by GruntJS-cssmin */'
    },
    files: {
      'public/home_assets/css/compressed.min.css': [
        'public/home_assets/css/**/*.css',
        'public/home_assets/vendor/**/*.css'
        ]
    }
  }
},

它可以正常工作并缩小CSS文件。但是，css/vendor/vendorname文件夹下的CSS文件会缩小到css文件夹，因此它们的路径会混乱。

例如，./image.jpg应为./vendor/vendorname/image.jpg，否则其相对性会被破坏。

我该如何解决这个问题？我可以使用什么样的技巧？

Answer 1

您可以将grunt-contrib-cssmin配置为处理具有相应目标的多个目标目录，方法是将grunt.initConfig cssmin行修改为以下内容：

files: {
  './css/compressed.min.css': ['./css/**/*.css'],
  './vendor/compressedvendor.min.css':['./vendor/**/*.css']
}

修改 根据您的评论，您需要一个文件，而不是两个。

sample Gruntfile.js显示了如何使用grunt-contrib-concat首先将文件加入，然后您可以在示例中运行cssmin（而不是uglify）。

因此，您的Gruntfile.js可能看起来像这样：

module.exports = function (grunt) {

    grunt.initConfig({
        concat: {
            dist: {
                src: ['./css/**/*.css', './vendor/**/*.css'],
                dest: './dist/tmp/concat.css'
            }
        },
        cssmin: {
            dist: {
                files: {
                    './dist/compressed.min.css': [ './dist/tmp/concat.css' ]
                }
            }
        }
    });

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

    grunt.registerTask('default', ['concat', 'cssmin']);
}

正如您在上面的代码中所看到的，您可能需要考虑是否应该具有源和目标文件结构，以便更轻松地管理文件。您可能还想查看其他grunt-contrib插件，例如-clean，以帮助自动执行更多构建任务...