Question

我第一次使用grunt来注释/缩小/ uglify我的整个角度项目。这就是我现在所拥有的：

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和媒体文件在正确的位置，不仅是注释/缩小/ uglified javascript？

Answer 1

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

.
├── 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构建整个角度项目

2 个答案: