如何用grunt部署Angular 2？

我正在嘗試構建一個Angular2應用程序，並且我想使用Grunt來部署它。出於某種原因，當我運行已部署的index.html時，我的代碼無法運行。有問題的代碼是角度網站的例子。我假設我要麼缺少依賴關係，要麼沒有正確部署。如何用grunt部署Angular 2？

此外，當從終端運行「grunt」時，我收到錯誤：EBUSY：資源忙或者鎖定在「deploy」文件夾中。我怎樣才能使它工作？任何幫助將不勝感激。

在此先感謝，同步。

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

我使用NPM具有以下的package.json文件安裝的依賴關係。 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']) 

};

我的文件夾結構是這樣的：

來源

2017-03-22 Syn

你不應該使用咕嚕，只需使用Angular CLI。它由角色團隊維護並使用webpack捆綁器，因此不需要Grunt。

要編譯應用程序，你會跑ng build：

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

這裏是一個更深入的文章why you should use Angular CLI

來源

2017-08-22 19:09:53 kevinius

有可能是遺留應用程序，並在那裏用例*現有*和潛在複雜的Grunt構建不能簡單地移植到另一個構建工具或工具，例如Angular CLI--需要考慮的事情，因爲這不能真正回答@ Syn的問題。 –

如何用grunt部署Angular 2？

回答

相關問題