使用 grunt 构建整个 angular 项目

Question

我第一次使用 grunt 是为了 annotate/minify/uglify 我的整个 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 文件都放在 "build" 文件夹中，文件夹结构正确。问题是：我只有 javascript 个文件。

我应该在 gruntfile 中添加什么才能将我的整个项目架构放在 "build" 文件夹中？ ( HTML,CSS 和媒体文件放在正确的位置，不仅 annotated/minified/uglified javascript ?

Answer 1

假设我们想要以下 post-build 文件结构：

.
├── 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']);

Answer 2

您需要查看 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`
}

使用 grunt 构建整个 angular 项目

Build whole angular project using grunt

javascript

angularjs

gruntjs

grunt-contrib-uglify

grunt-contrib-concat