Javascript 将grunt添加到基于AngularJS构建的现有应用程序

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

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

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

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

需要做的基本事情：

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

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

---

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

你的项目有多远并不重要。您仍然可以使用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文件夹。您可能都不想包含日志文件

然后，我连接所需的文件并使输出丑陋：

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']
            }
        ]
    }
},

concat：{
选项：{
分隔符：'；'
},
地区：{
src:['public/javascripts/app.js'、'public/javascripts/controllers/*'、'public/javascripts/directives/*'、'public/javascripts/services/*']，
dest:'build/public/app.js'
}
},
丑陋的：{
选项：{
横幅：'/*！版本：\n*生成日期：\n*/\n'，
},
地区：{
档案：[
{
'build/public/app.min.js'：['build/public/app.js']
}
]
}
},

我喜欢在文件中添加横幅，包括版本、日期等。当然，如果你愿意，你也可以缩小HTML和CSS

不要忘记加载任务，例如，

grunt.loadNpmTasks（'grunt-contrib-clean'）

您可以将其集成到任何应用程序中，无论是新应用程序还是远程应用程序