1

私は、yeo、grunt、bower などを使わずに構築された AngularJS アプリケーションを持っています。これは現在、Rails を介して行われています。しかし、特定の問題により、Rails から AngularJS アプリを分離し、純粋に API として Rails を使用するプロセスを進めています。

  • grunt を既存のアプリに統合するにはどうすればよいですか? これが可能かどうか。
  • 落とし穴？

アプリの現在のアーキテクチャに従って、コントローラー、サービス、テンプレート、フィルター、ディレクティブはすべて別のフォルダーにあります。

  • grunt を実装するために必要な特定のフォルダー構造はありますか?

実行する必要がある基本的なこと:

  • ソースファイルを1つに圧縮します（コントローラーを1つのコントローラーになど）
  • 縮小する

現在の gruntFile

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),


        clean: ['js/dist/**/*.js'], 
        concat: {
            controllers: {
                src: ['js/controllers/*.js'],
                dest: 'js/dist/controller.js'
            },
            models: {
                src: ['js/services/*.js'],
                dest: 'js/dist/service.js'
            }
        },
        uglify: {
            options: {
              mangle: false
            },
            my_target: {
                files: {
                    'js/dist/controller.min.js': ['js/dist/controller.js'],
                    'js/dist/service.min.js': ['js/dist/service.js'],
                    'js/dist/filters.min.js': ['js/filters/filters.js'],
                    'js/dist/directives.min.js': ['js/directives/custom.js'],
                    'js/dist/app.min.js': ['js/app.js']
                }
            }
        },
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'assets/images/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'assets/images/'
                }]
            }
        }
    });

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

どうすれば始められますか? これが明らかな場合は申し訳ありませんが、うなり声を使用するのはこれが初めてなので、適切なアドバイスが必要です。

4

1 に答える 1

1

プロジェクトのどこまで進んでいるかは問題ではありません。grunt を使用してアプリケーションをビルドすることもできます。

私が通常行うことは、最初にすべてをクリーンアップして、次のように build/dist フォルダーにコピーすることです。

clean: {
    all: {
        src: ['build']
    },
    old: {
        src: ['build/public/app.js']
    }
},

copy: {
    client: {
        files: [
            {
                expand: true,
                cwd: 'public/',
                src: ['**', '!**javascripts/**', '!**stylesheets/**', '!**views/**'],
                dest: 'build/public',
                filter: 'isFile',
                flatten: false
            }
        ]
    },
    vendor: {
        files: [
            {
                expand: true,
                src: ['public/javascripts/vendor/*'],
                dest: 'build/public/javascripts/vendor/',
                filter: 'isFile',
                flatten: true
            }
        ]
    },
    server: {
        files: [
            {
                expand: true,
                src: ['**', '!public/**', '!Gruntfile.js', '!**nbproject/**', '!access.log', '!files/**/*'], 
                dest: 'build/',
                filter: 'isFile'
            }
        ]
    }
},

!**nbproject/**そのフォルダーを除外するために Netbeans を IDE として使用している場合は注意してください。この特定のプロジェクトには多くのファイル (添付ファイル) があるため、ファイル フォルダーも除外します。おそらく、ログ ファイルも含めたくないでしょう。

次に、必要なファイルを連結し、出力を醜くします。

concat: {
    options: {
        separator: ';'
    },
    dist: {
        src: ['public/javascripts/app.js', 'public/javascripts/controllers/*', 'public/javascripts/directives/*', 'public/javascripts/services/*'],
        dest: 'build/public/app.js'
    }
},
uglify: {
    options: {
        banner: '/*! <%= pkg.name %> Version : <%= pkg.version %> \n * Build date: <%= grunt.template.today("dd-mm-yyyy") %>\n */\n',
    },
    dist: {
        files: [
            {
                'build/public/app.min.js': ['build/public/app.js']
            }
        ]
    }
},

バージョン、日付などを含むバナーをファイルに追加するのが好きです。もちろん、必要に応じて、HTML と CSS を縮小することもできます。

タスクをロードすることを忘れないでくださいgrunt.loadNpmTasks('grunt-contrib-clean');。

これは、新規または開発が進んでいる任意のアプリに統合できます。

于 2015-06-24T06:47:20.290 に答える