web-dev-qa-db-ja.com

Gruntを使用してベンダーCSSファイルの画像のURLを書き換える方法

フロントエンドの依存関係をバージョン管理システムから移動しようとしています。 Bower.ioとGruntの組み合わせでこれを実行できるはずです。

ただし、複数のベンダーライブラリのバンドルではまだ解決できない問題が発生します。たとえば、次のディレクトリ構造があるとします。componentsディレクトリは、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）への参照は正しくありません。機能させるためには、それらを書き直す必要があります（so ../images/next.gif => ../components/jquery-ui/images/next.gif）。 （d）このURLの書き換えはGruntができるはずだと思います。 しかし、cssmin/less/copyタスクを使用してこれを機能させることはできないようです。たとえば、次の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の設定を間違えたか、何か間違ったことをしましたか？

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

ありがとう！

relative-pathgruntjsbower
29
Roel van Duijnhoven

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

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

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

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

5
Roel van Duijnhoven

たぶん、このうなり声のパッケージ https://github.com/Ideame/grunt-css-urls を見てみてください。このパッケージはあなたの問題を正確に解決することを意図しているようです。

編集：このプラグインを確認した後、ビルドプロセスを円滑にするためにマークアップを書き換えるのは好きではありませんでした。だから私は自分のために書き換えを行う独自の小さな関数を書くことになりました。

私はcssファイルをバンドルするためにgruntの concat プラグインを使用しています。このプラグインの良いところは、連結前のファイル処理機能をサポートしていることです。これで私のgruntfileは次のようになります。

grunt.initConfig({
concat: {
    options: {
    separator: '\n',
    process: function (src, filepath) {
        var cssPatt = new RegExp('app(\/.*\/).*\.css$');

        //filter out everithing except css files
        var file = cssPatt.exec(filepath);

        if (file) {
            var urlPatt = /url\(\'(.*)\'\)/g;

        console.log('In file: ' + filepath);

        //replace every url(...) with its absolute path
        return src.replace(urlPatt, function (match, p1) {
            console.log(' * ' + match + ' -> ' + 'url(\'' + file[1] + p1 + '\')');
            return 'url(\'' + file[1] + p1 + '\')';
        });
        }

        return src;
    }
    },
}
6
Ulan Murzatayev