7

現在、プロジェクトの grunt-useminをセットアップしていますが、タスクで小さな問題が発生していcssminます。

私たちのプロジェクトは、いくつかの外部ライブラリに依存しており、いくつかの外部ライブラリは長い追加アセット (画像やフォントなど) をもたらします。問題は、これらのライブラリのフォルダー構造が同じでないことです。

これは、さまざまなフォルダー構造の例です。

lib
|--lib1
|   |--style1.css
|   +--image1.png
+--lib2
   |--styles
   |   +--style2.css
   +--images
       +--image2.png

index.html では、すべてのスタイルシートが参照され、ビルド ブロック内に配置されます。そのため、usemin タスクが実行されると、ライブラリのスタイルシートが 1 つの縮小されたファイルに連結され、出力フォルダー内に配置されます。対応するアセット (画像) もこの出力フォルダーにコピーされ、imgフォルダー内でフラット化されます。出力フォルダー構造は次のようになります

out
|--allstyles.min.css
|--image1.png
+--image2.png

ご想像のとおり、連結されたスタイルシートには (この例では) 2 つの異なる相対 URI があります。

  • image1.png
  • ..\images\image2.png

これにより、一部の画像が見つからないという問題が発生しています。すべての相対 URI を out フォルダーにリベースするソリューションが必要です。タスクのオプションtargetとrootオプションを使用しようとしましたが、役に立ちませんでした。cssmin誰かがこのタスクの正しい構成、または私が探しているものを達成できる別の Grunt タスクを教えてもらえますか?

前もって感謝します！

4

2 に答える 2

2

cssmin のドキュメント/オプションを参照してください。

  • rebase: false に設定すると、URL のリベースがスキップされます

これで問題は解決します。

于 2015-02-11T13:42:40.153 に答える
2

に grunt ファイルC:\web\projectと に CSS ファイルがありますC:\web\project\www\css。次のスニペットは私の grunt ファイルからのもので、URL を正しくリベースします。

var cssFiles = [
      'www/css/layout/Header.css',
      'www/css/layout/Footer.css',
      'www/css/vendor/chosen/chosen.css'
      // ...
];

cssmin: {
        concat: {
                options: {
                        keepBreaks: true, //  whether to keep line breaks (default is false)
                        debug: true, // set to true to get minification statistics under 'stats' property (see test/custom-test.js for examples)
                        noAdvanced: true, // set to true to disable advanced optimizations - selector & property merging, reduction, etc.
                        //relativeTo: 'http://online-domain-tools.com/'
                        noRebase: false, // whether to skip URLs rebasing
                        root: 'www'
                },
                nonull: true,
                src: cssFiles,
                dest: 'www/temp/application.css'
        },
        minify: {
                options: {},
                nonull: true,
                src: ['www/temp/application.css'],
                dest: 'www/temp/application.min.css'
        }
},

// ...

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

gruntfile を投稿して比較できますか?

関連資料: https://stackoverflow.com/a/21415649/99256

于 2014-07-20T07:30:14.453 に答える