gruntを使用して角型プロジェクト全体を構築する

Question

私は角度プロジェクトを注釈付け/縮小/ uglifyするためにはじめてgruntを使用しています。ここでは一瞬のために私が持っているものです。

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ファイルしか持っていない。

"build"フォルダに私のプロジェクトアーキテクチャ全体を入れるためにgruntfileに追加するものは何ですか？ ？

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

grunt-contrib-concat
：（HTML、CSS、およびメディアファイルが適切な場所では、だけではなく、注釈付き/縮小さ/ uglified javascriptの

Answer 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` 
} 

Answer 2

のは、我々は以下のビルド後のファイル構造をしたいと仮定しましょうあなたはちょうどあなたがJSファイルでやったように、あなたのCSSは単一のファイルに連結されるためにパラメータを追加することができます。

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
これはあなたのイメージMinifies

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

grunt-contrib-imagemin
（。、連結タスクが作成された1つのファイルを）あなたのCSSを縮小化し、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']);