如何使用grunt部署Angular 2？

我正在尝试构建一个Angular2应用程序，我想使用Grunt来部署它。出于某种原因，当我运行部署的index.html时，我的代码无法工作。所讨论的代码是angular网站上的示例。我假设我缺少依赖项，或者soemthing没有正确部署

另外，当从终端运行“grunt”时，我会收到错误：EBUSY:resource busy或锁定在“deploy”文件夹上。我怎样才能让它工作呢？任何帮助都将不胜感激

提前感谢,， 西恩

我使用npm安装和以下package.json文件安装了依赖项：

{
   "name": "MyProject",
   "version": "0.0.1",
   "description": "My description",
   "main": "index.html",
   "scripts": {
       "postinstall": "npm dedupe"
   },
   "author": "Me",
   "license": "UNLICENSED",
   "dependencies": {
       "@angular/common": "2.0.0-rc.5",
       "@angular/compiler": "2.0.0-rc.5",
       "@angular/core": "2.0.0-rc.5",
       "@angular/forms": "0.3.0",
       "@angular/http": "2.0.0-rc.5",
       "@angular/platform-browser": "2.0.0-rc.5",
       "@angular/platform-browser-dynamic": "2.0.0-rc.5",
       "@angular/router-deprecated": "2.0.0-rc.0",
       "@angular/upgrade": "2.0.0-rc.0",
       "systemjs": "0.19.27",
       "es6-shim": "^0.35.0",
       "reflect-metadata": "^0.1.3",
       "rxjs": "5.0.0-beta.6",
       "zone.js": "^0.6.12",
       "angular2-in-memory-web-api": "0.0.5",
       "bootstrap": "^3.3.6"
   },
   "devDependencies": {
       "@types/core-js": "^0.9.37",
       "babel-cli": "^6.18.0",
       "babel-preset-es2015": "^6.16.0",
       "babel-runtime": "^6.11.6",
       "concurrently": "^2.0.0",
       "grunt": "^1.0.1",
       "grunt-babel": "^6.0.0",
       "grunt-contrib-clean": "^1.0.0",
       "grunt-contrib-concat": "^1.0.1",
       "grunt-contrib-copy": "^1.0.0",
       "grunt-contrib-less": "^1.4.1",
       "grunt-contrib-sass": "^1.0.0",
       "grunt-contrib-uglify": "^2.0.0",
       "grunt-contrib-watch": "^1.0.0",
       "grunt-sync": "^0.6.2",
       "lite-server": "^2.2.0",
       "typescript": "^1.8.10",
       "typings": "^0.8.1"
   }, "repository": {
       "type": "git",
       "url": "ssh://< MY REPO>"
   }
}

我的grunfile.js如下所示：

{ "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../deploy",
    "sourceMap": true,
    "target": "es6"
}}

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
            clean: {
            src: ['deploy/**']
        }, concat: {
            options: {
                separator: ';'
            }, dist: {
                src: ['src/js/**/*.js'],
                dest: 'deploy/js/<%= pkg.name %>.concat.js'
            } 
        }, babel: {
            options: {
                presets: ["es2015"],
                sourceMap: true,
                compact: true,
                babelrc: false
            }, files: {
                expand: true,
                src: ['<%= concat.dist.dest %>'],
                ext: '-babel.js'
            }
        }, typescript: {
            base: {
                src: [
                    'js/tsd.d.ts',
                    'js/*.ts',
                    'app.ts',
                    'app.js',
                    'js/*.js'
                ], dest:'build',
                options: {
                    target:'ES6',
                    module:'commonjs',
                    sourceMap:true,
                    watch: {
                        after: ['copy'],
                        atBegin: true
                    }
                }
            }
        },
        uglify: {
            options: {
                preserveComments: false,
                screwIE8: true,
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            }, default: {
                options: {mangle: true},
                files: {
                    'deploy/js/<%= pkg.name %>.min.js': ['temp/<%= pkg.name %><%=babel.files.ext %>']
                }
            }, dev: {
                options: {mangle: false, beautify: true},
                files: {
                    'deploy/js/<%= pkg.name %>.min.js': ['temp/<%= pkg.name %><%=babel.files.ext %>']
                }
            }
        }, sync: {
            main: {
                files: [{
                    cwd: 'src',
                    src: ['**', '!**/*.js', '!**/*.scss'],
                    dest: 'deploy'
                }, {
                    cwd: 'node_modules/@angular',
                    src: ['angular.min.js'],
                    dest: 'deploy/js'
                }, {
                    cwd: 'node_modules/bootstrap/dist/js',
                    src: ['bootstrap.min.js'],
                    dest: 'deploy/js'
                }, {
                    cwd: 'src',
                    src: ['**/*.html'],
                    dest: 'deploy'
                }] 
            }
        }, watch: {
            JS: {
                files: ['src/js/**'],
                tasks: ['watcherDoJsNoUgly'],
                options: {spawn: true}
            }, CSS: {
                files: ['src/css/**'],
                tasks: ['sync'],
                options: {spawn: true}
            }, HTML_AND_OTHER_FILES: {
                files: ['src/html/*.html', 'src/res/**'],
                tasks: ['sync'],
                options: {spawn: true}
            }
        }
    });
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sync');
    grunt.registerTask('watcherDoJsNoUgly', ['concat', 'babel', 'uglify:dev']);
    grunt.registerTask('watcherDoJs', ['concat', 'babel', 'uglify:default']);
    grunt.registerTask('default', ['clean', 'watcherDoJsNoUgly', 'sync', 'watch']);
    grunt.registerTask('deploy', ['clean', 'watcherDoJs', 'sync'])

};

module.exports=函数（grunt）{
grunt.initConfig({
pkg:grunt.file.readJSON（'package.json'），
清洁：{
src:['deploy/**']
}，concat：{
选项：{
分隔符：'；'
}，区：{
src:['src/js/***.js']，
dest:'deploy/js/.concat.js'
} 
}，巴别塔：{
选项：{
预设值：[“es2015”]，
sourceMap:true，
是的，
法律改革委员会：错
}，档案：{
是的，
src:['']，
分机：'-babel.js'
}
}，打字稿：{
基数：{
src:[
“js/tsd.d.ts”，
“js/*.ts”，
“app.ts”，
“app.js”，
'js/*.js'
]，目标：'build'，
选项：{
目标：'ES6'，
模块：'commonjs'，
sourceMap:true，
观察：{
之后：[“复制”]，
阿特贝京：对
}
}
}
},
丑陋的：{
选项：{
评论：错，
没错，
横幅：'/*！*/\n'
}，默认值：{
选项：{mangle:true}，
档案：{
'deploy/js/.min.js'：['temp/']
}
}，dev:{
选项：{mangle:false，美化：true}，
档案：{
'deploy/js/.min.js'：['temp/']
}
}
}，同步：{
主要内容：{
档案：[{
cwd:‘src’，
src:['**'，'！***/*.js'，'！***/*.scss']，
目标：“部署”
}, {
cwd:'node_modules/@angular'，
src:['angular.min.js']，
dest:'deploy/js'
}, {
cwd:'node_modules/bootstrap/dist/js'，
src:['bootstrap.min.js']，
dest:'deploy/js'
}, {
cwd:‘src’，
src:['**.html']，
目标：“部署”
}] 
}
}，观看：{
JS:{
文件：['src/js/**']，
任务：['watcherdojsnough']，
选项：{spawn:true}
}，CSS:{
文件：['src/css/**']，
任务：[“同步”]，
选项：{spawn:true}
}、HTML_和其他_文件：{
文件：['src/html/*.html'，'src/res/**']，
任务：[“同步”]，
选项：{spawn:true}
}
}
});
grunt.loadNpmTasks（“grunt-babel”）；
grunt.loadNpmTasks（“grunt-contrib-clean”）；
grunt.loadNpmTasks（“grunt-contrib-concat”）；
grunt.loadNpmTasks（“grunt-contrib-uglify”）；
grunt.loadNpmTasks（“grunt-contrib-watch”）；
grunt.loadNpmTasks（'grunt-sync'）；
registerTask（'watcherdojsnought'，['concat'，'babel'，'uglify:dev']）；
registerTask（'watcherDoJs'，['concat'，'babel'，'uglify:default']）；
registerTask（'default'，['clean'，'watcherdojsnought'，'sync'，'watch']）；
registerTask（'deploy'，['clean'，'watcherDoJs'，'sync']））
};

我的文件夹结构如下所示：

{ "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../deploy",
    "sourceMap": true,
    "target": "es6"
}}

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
            clean: {
            src: ['deploy/**']
        }, concat: {
            options: {
                separator: ';'
            }, dist: {
                src: ['src/js/**/*.js'],
                dest: 'deploy/js/<%= pkg.name %>.concat.js'
            } 
        }, babel: {
            options: {
                presets: ["es2015"],
                sourceMap: true,
                compact: true,
                babelrc: false
            }, files: {
                expand: true,
                src: ['<%= concat.dist.dest %>'],
                ext: '-babel.js'
            }
        }, typescript: {
            base: {
                src: [
                    'js/tsd.d.ts',
                    'js/*.ts',
                    'app.ts',
                    'app.js',
                    'js/*.js'
                ], dest:'build',
                options: {
                    target:'ES6',
                    module:'commonjs',
                    sourceMap:true,
                    watch: {
                        after: ['copy'],
                        atBegin: true
                    }
                }
            }
        },
        uglify: {
            options: {
                preserveComments: false,
                screwIE8: true,
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            }, default: {
                options: {mangle: true},
                files: {
                    'deploy/js/<%= pkg.name %>.min.js': ['temp/<%= pkg.name %><%=babel.files.ext %>']
                }
            }, dev: {
                options: {mangle: false, beautify: true},
                files: {
                    'deploy/js/<%= pkg.name %>.min.js': ['temp/<%= pkg.name %><%=babel.files.ext %>']
                }
            }
        }, sync: {
            main: {
                files: [{
                    cwd: 'src',
                    src: ['**', '!**/*.js', '!**/*.scss'],
                    dest: 'deploy'
                }, {
                    cwd: 'node_modules/@angular',
                    src: ['angular.min.js'],
                    dest: 'deploy/js'
                }, {
                    cwd: 'node_modules/bootstrap/dist/js',
                    src: ['bootstrap.min.js'],
                    dest: 'deploy/js'
                }, {
                    cwd: 'src',
                    src: ['**/*.html'],
                    dest: 'deploy'
                }] 
            }
        }, watch: {
            JS: {
                files: ['src/js/**'],
                tasks: ['watcherDoJsNoUgly'],
                options: {spawn: true}
            }, CSS: {
                files: ['src/css/**'],
                tasks: ['sync'],
                options: {spawn: true}
            }, HTML_AND_OTHER_FILES: {
                files: ['src/html/*.html', 'src/res/**'],
                tasks: ['sync'],
                options: {spawn: true}
            }
        }
    });
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sync');
    grunt.registerTask('watcherDoJsNoUgly', ['concat', 'babel', 'uglify:dev']);
    grunt.registerTask('watcherDoJs', ['concat', 'babel', 'uglify:default']);
    grunt.registerTask('default', ['clean', 'watcherDoJsNoUgly', 'sync', 'watch']);
    grunt.registerTask('deploy', ['clean', 'watcherDoJs', 'sync'])

};

---

你不应该使用咕噜，只要使用。它由angular团队维护，并使用webpack捆绑程序，因此不需要Grunt

要编译应用程序，请运行：

ng build --prod //this will also minify/uglify,...

---

这是一篇关于

的更深入的文章，可能存在遗留的应用程序和用例，其中存在和潜在的复杂的Grand构建，不能简单地迁移到另一个构建工具或工具，即角度CLI——要考虑的问题，因为这并没有真正回答@Syn的问题。我自己在Angular 2中还没有看到一个咕噜的任务。因此，您可能只需要使用grun shell或grun exec插件调用Angular 2 CLI，直到生成一个。或者你也可以自己做一个，按照我刚才说的做。