如何使用 grunt 部署 Angular 2？

Posted 2023-03-07

【中文标题】如何使用 grunt 部署 Angular 2？

【英文标题】：How to deploy Angular 2 with grunt?

【发布时间】：2017-08-14 13:54:28

【问题描述】：

我正在尝试构建一个 Angular2 应用程序，并且我想使用 Grunt 来部署它。出于某种原因，当我运行部署的 index.html 时，我的代码不起作用。有问题的代码是来自 Angular 网站的示例。我假设我要么缺少依赖项，要么没有正确部署某些东西。

此外，当从终端运行“grunt”时，我收到错误：EBUSY：资源繁忙或锁定在“deploy”文件夹上。我怎样才能让它工作？任何帮助将不胜感激。

提前致谢， 同步。

我使用带有以下 package.json 文件的 npm install 安装了依赖项：

   "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>"
   

我的 tsconfig.json 看起来像这样：

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

而我的 gruntfile.js 是这样的：

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 2 的 Grunt 任务。因此，您可能只需要使用 grun-shell 或 grun-exec 插件来调用 Angular 2 CLI 直到那里是制作的。或者你也可以自己做一个，基本上就是我刚才说的。

【参考方案1】：

您不应该使用 Grunt，只需使用 Angular CLI。它由 Angular 团队维护并使用 webpack 捆绑器，因此不需要 Grunt。

要编译您的应用程序，您需要运行 ng build ：

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

这里有一篇关于why you should use Angular CLI的更深入的文章

【讨论】：

可能有遗留的应用程序和用例存在 existing 和潜在的复杂 Grunt 构建，它们不能简单地迁移到另一个构建工具或工具，即 Angular CLI - 需要考虑的事情，因为这并不能真正回答@Syn 的问题。