使用 grunt 构建整个 Angular 项目答案

【问题标题】：Build whole angular project using grunt使用 grunt 构建整个 Angular 项目
【发布时间】：2016-08-07 16:30:56
【问题描述】：

我第一次使用 grunt 来注释/缩小/丑化我的整个 Angular 项目。这是我目前拥有的：

module.exports = function(grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    ngAnnotate: {
        options: {
            singleQuotes: true
        },
        all: { //"app" target
             files: [
            {
                expand: true,
                src: ['./app/**/*.js'],
                dest: './build',
            },
        ],
        }
    },
    concat: {
        js: { //target
             files: [
            {
                expand: true,
                src: ['./build/**/*.js'],
                dest: '.',
            },
        ],
        }
    },
    uglify: {
        js: { //target
             files: [
            {
                expand: true,
                src: ['./build/**/*.js'],
                dest: '.',
            },
        ],
        }
    }



    //grunt task configuration will go here     
});
//load grunt task
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-ng-annotate');
//register grunt default task
grunt.registerTask('default', ['ngAnnotate', 'concat', 'uglify']);
}

这很好用，我将所有 .js 文件放在“构建”文件夹中，并具有正确的文件夹架构。问题是：我只有 javascript 文件。

我应该在 gruntfile 中添加什么以使我的整个项目架构在“build”文件夹中？（HTML、CSS 和媒体文件在正确的位置，而不仅仅是带注释/缩小/丑化的 javascript？

【问题讨论】：

标签： javascript angularjs gruntjs grunt-contrib-uglify grunt-contrib-concat

【解决方案1】：

您需要查看copy task。它允许您将文件从一个目录复制到另一个目录（例如您的 html、css、字体、图像等）：

copy: {
  html: {
    files: [
      {expand: true, cwd: '.app/', src: ['some-dir/index.html'], dest: '.build/'}
    ]
  },
  css: {
    files: [
      {expand: true, cwd: '.app/', src: ['some-dir/styles/**/*.css'], dest: '.build/'}
    ]
  },
  // ... more targets for `copy`
}

【讨论】：

【解决方案2】：

假设我们需要以下构建后文件结构：

.
├── build
│   ├── css
│   ├── img
│   └── js
└── index.html

grunt-contrib-concat
您可以添加一个参数，将您的 CSS 连接到一个文件中，就像您对 JS 文件所做的那样。

    concat: {
        js: {
            src: [
                'scripts/config.js',
                'app.js',
                'controllers/*.js'
            ],
            dest: 'build/js/main.js'
        },
        css: {
            src: [
                'css/*.css'
            ],
            dest: 'build/css/main.css'
        }
    }

grunt-contrib-cssmin
这将缩小您的 CSS（concat 任务创建的单个文件。）

    cssmin: {
        target: {
            files: [{
                expand: true,
                cwd: 'build/css',
                src: ['*.css', '!*.min.css'],
                dest: 'build/css',
                ext: '.min.css'
            }]
        }
    }

grunt-contrib-imagemin
缩小您的图像并将它们放入build/img。

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images/',
                src: ['**/*.{png,jpg,jpeg}'],
                dest: 'build/img/'
            }]
        }
    }

最后：

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

grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'imagemin']);

【讨论】：