Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用grunt部署Angular 2?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试构建一个Angular2应用程序,我想使用Grunt来部署它.出于某种原因,当我运行已部署的index.html时,我的代码不起作用.有问题的代码是角度网站的例子.我假设我要么缺少一个依赖项,要么没有正确部署soemthing.

此外,当从终端运行“grunt”时,我收到错误:EBUSY:资源忙或锁定在“deploy”文件夹上.我怎么能让它起作用?任何帮助将不胜感激.

提前致谢,
SYN.

使用Npm install和以下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>"
   }
}

我的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是这样的

@H_393_14@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'],{ cwd: 'src',src: ['**/*.html'],dest: 'deploy' }] } },watch: { JS: { files: ['src/js/**'],tasks: ['watcherDoJsnoUgly'],options: {spawn: truE} },CSS: { files: ['src/css/**'],tasks: ['sync'],HTML_AND_OTHER_FILES: { files: ['src/html/*.html','src/res/**'],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','uglify:default']); grunt.registerTask('default',['clean','watcherDoJsnoUgly','sync','watch']); grunt.registerTask('deploy','watcherDoJs','sync']) };

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

如何使用grunt部署Angular 2?

解决方法

你不应该使用Grunt,只需使用 Angular CLI.它由角度团队维护并使用webpack捆绑器,因此不需要Grunt.

要编译您的应用程序,您将运行ng build

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

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

大佬总结

以上是大佬教程为你收集整理的如何使用grunt部署Angular 2?全部内容,希望文章能够帮你解决如何使用grunt部署Angular 2?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。