0

これは私のものですGruntfile.js(assetsはBowerフォルダーです):

module.exports = function(grunt) {
    grunt.initConfig({
        distFolder: 'dist',
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';',
            },
            dist: {
                src: [
                    'assets/jquery/dist/jquery.js',
                    'assets/jquery-ui/ui/jquery-ui.js',
                    'assets/jsplumb/dist/js/jquery.jsPlumb-1.5.5.js'
                ],
                dest: '<%= distFolder %>/main.js',
            },
        },
        uglify: {
            dist: {
                src: 'dist/main.js',
                dest: 'dist/main.min.js',
            },
        },
        cssmin: {
            combine: {
                files: {
                    'dist/main.min.css': [
                        'assets/font-awesome/css/font-awesome.min.css',
                        'assets/jquery-ui/themes/base/jquery-ui.css',
                    ],
                }
            }
        },
    });

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

    grunt.registerTask('build', ['concat', 'uglify']);
};

すべて正常に動作しますが、私が疑ったように、Font-awesome を使用するとフォントとの接続が失われますgrunt-contrib-mincss。

Grunt で自動化して、次のようなことを行うことはできますか?

  • フォント ファイルを からassets/font-awesome/fonts/にコピーdist/fonts/
  • url(../fonts/に書き換えるurl(fonts/

前もって感謝します！

4

1 に答える 1

1

bower コンポーネントまたはベンダーのフォント、画像、@imports は、コンポーネント自体に応じて相対または絶対である可能性があります。cssmin タスクを構成して、相対リソースを dist パスの正しいパスに書き換える必要があります。次のコードを使用すると、すべてのリソース URL が絶対 URL を使用して書き換えられます。

cssmin: {
    options: {
        root: 'app'
    },
    combine: {
        files: {
            'dist/main.min.css': [
                'app/bower_components/lib1/main.css',
                'app/bower_components/jquery-ui/themes/base/jquery-ui.css',
            ]
        }
    }
}

root オプションを入力ファイルのベース パスに設定することが重要です。あなたの場合、ルートオプションを「/」または「」に設定する必要があると思います

プロジェクトの構造を教えていただければ、さらにお手伝いできます。

あなたのプロジェクト構造はこのようなものですが

/
/assets
/other_files
/dist

于 2014-04-07T10:58:20.633 に答える