29

フロントエンドの依存関係をバージョン管理システムから移動しようとしています。Bower.io と Grunt を組み合わせれば、これが可能になります。

ただし、複数のベンダー ライブラリをバンドルしても解決できないという問題が発生します。たとえば、コンポーネントディレクトリが Bower.io が依存関係を保存するディレクトリである次のディレクトリ構造があるとします。

├── assets
└── components
    ├── bootstrap
    │   ├── img
    │   │   └── glyhs.gif
    │   └── less
    │       └── bootstrap.css
    └── jquery-ui
        ├── css
        │   └── style.css
        └── images
            ├── next.gif
            └── prev.gif

ここで、jQuery のstyle.cssと Bootstrap のbootstrap.cssの両方をバンドルしたいとします。このバンドル ファイルをassets/bundled.cssに保存します。

ただし、このファイルでは、元の画像 (../images/next.gif および ../img/glyhs.gif) への参照が正しくありません。それらを機能させるには、書き直す必要があります (つまり、../images/next.gif => ../components/jquery-ui/images/next.gif)。私は、この URL の書き換えは Grunt ができるべきことだと信じています。しかし、 cssmin/less/copy tasks を使用してこれを機能させることはできないようです。たとえば、次の Grunt セットアップ (1 つのファイルのみを移動する) は機能しません。

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        less: {
            options: {
                compile: false,
                relativeUrls: true
            },
            bootstrap: {
                src: 'components/bootstrap/less/bootstrap.less',
                dest: 'assets/bootstrap.css'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.registerTask('dist-css', ['less']);
};

また：

  • Grunt の設定を誤ったか、何か間違ったことをしましたか?

  • または、私が説明しているワークフローは単に正しいものではなく、代わりに別のワークフローを使用する必要があります。

ありがとう！

4

3 に答える 3

5

参考までに、すぐに利用できるソリューションがあります。私はこれと同じ問題を CleanCss grunt プラグインに投稿しました。彼らはそれを受け入れ、新しい 1.1 リリースでこの動作を公開しました。

問題は GitHub トラッカー ( https://github.com/GoalSmashers/clean-css/issues/129 ) で見つけることができます。

このライブラリを使用すると、(ルート ディレクトリから) 絶対的な書き換えを使用したり、新しい出力ディレクトリに基づいて相対イメージ パスを変更したりできます。--rootまたは--ouputディレクティブを探します。

ヒントと回答をありがとう！

于 2013-09-11T09:34:13.800 に答える
-2

dist css ファイルを検索/置換して、正しい相対パスを生成する必要があります。これを行うことができる多くの grunt プラグインがありますが、個人的にはgrunt-replaceを好みます。圧縮されていないアセットを変数で設定し、動的に生成された URL を使用して dist css を生成します。

body {
    background:url(@@IMG_PATH/background.jpg);
}

dist では次のようになります。

body {
    background:url(path/to/background.jpg);
}

お役に立てれば。

于 2013-08-24T16:52:56.817 に答える