1

我有一个 AngularJS 应用程序，它是在没有 yeo、grunt、bower 等的情况下构建的。目前这是通过 Rails 完成的。但是由于某些问题，我们正在将 AngularJS 应用程序与 Rails 分开，并将 Rails 纯粹用作 API。

  • 如何将 grunt 集成到现有应用程序中？这是否可能。
  • 坑坑洼洼？

根据应用程序的当前架构，控制器、服务、模板、过滤器、指令都在单独的文件夹中。

  • 实现 grunt 是否需要任何特定的文件夹结构？

需要做的基本事情：

  • 将源文件压缩为一个（控制器为 1 个控制器等）
  • 缩小

当前的 grunt 文件

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']);
};

我该如何开始？抱歉，如果这看起来很明显，但这将是第一次使用 grunt，因此希望得到适当的建议。

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 来排除该文件夹。我在这个特定项目中有很多文件（附件），所以我也排除了 files 文件夹。您可能都不想包含您的日志文件。

然后我连接所需的文件并 uglify 输出：

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 回答