关键词：
【中文标题】如何使用 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 的问题。使用 grunt、bower、node 模块部署到 heroku
...中包含我的节点模块吗？如果没有，我真的不确定我需要如何部署，因为post脚本引用了节点模块中的凉亭安装。我应该在g 查看详情
如何在 WebStorm 中调试从 grunt serve 开始的 Angular 网站？
】如何在WebStorm中调试从gruntserve开始的Angular网站？【英文标题】：HowcanIdebuganAngularwebsitestartedwithgruntserveinsideWebStorm?【发布时间】：2016-12-0112:27:30【问题描述】：我正在尝试从WebStorm中调试我的AngularJS站点。该网站使用“gruntserve... 查看详情
如何使用 proxy-config 将 Angular 2 应用程序部署到 HTTP 服务器
】如何使用proxy-config将Angular2应用程序部署到HTTP服务器【英文标题】：Howtodeployangular2applicationtoHTTPserverwithproxy-config【发布时间】：2018-06-1612:53:11【问题描述】：我正在使用以下代理配置构建Angular2应用程序。proxy.conf.json"/":"target"... 查看详情
如何部署我的 Angular 2 + Typescript + Webpack 应用程序
】如何部署我的Angular2+Typescript+Webpack应用程序【英文标题】：HowcanIdeploymyAngular2+Typescript+Webpackapp【发布时间】：2017-01-2910:55:37【问题描述】：我实际上正在使用Typescript学习Angular2，并基于angular-seed项目(angular-seed)开发了一个小应... 查看详情
我如何实际部署 Angular 2 + Typescript + systemjs 应用程序？
】我如何实际部署Angular2+Typescript+systemjs应用程序？【英文标题】：HowdoIactuallydeployanAngular2+Typescript+systemjsapp?【发布时间】：2016-07-1701:17:14【问题描述】：在angular.io上有一个使用typescript和systemjs的快速入门教程。现在我已经运行... 查看详情
AWS Beanstalk 使用 Grunt 任务部署 Laravel
】AWSBeanstalk使用Grunt任务部署Laravel【英文标题】：AWSBeanstalkDeployLaravelwithGruntTasks【发布时间】：2014-05-2814:10:18【问题描述】：我有一个Laravel4.1应用程序，我想在AWSBeanstalk上运行。但问题是我有一些Grunt任务，我想在部署时运行以... 查看详情
发布 Angular 2 应用程序（部署）
】发布Angular2应用程序（部署）【英文标题】：PublishingAngular2app(deployment)【发布时间】：2016-09-2918:05:10【问题描述】：最后我完成了我的Angular2应用程序的困难部分，我想在服务器上看到它。我有Linux网络托管我正在托管PHP和SQL网... 查看详情
让 angular-socket-io 与 Grunt 一起工作
】让angular-socket-io与Grunt一起工作【英文标题】：Gettingangular-socket-ioworkingwithGrunt【发布时间】：2016-03-0119:17:12【问题描述】：我无法让socket.io与我的使用Grunt的项目一起工作。我目前正在通过凉亭使用angular-socket-io。以下是我到目... 查看详情
使用 grunt 服务器，如何将所有请求重定向到根 url？
...】：2013-06-0910:48:47【问题描述】：我正在构建我的第一个Angular.js应用程序，我正在使用Yeoman。Yeoman使用Grunt允许您使用命令“gruntserver”运行node.js连接服务器。我在html5模式下运行我的A 查看详情
如何将 Angular 2/4 应用程序部署到网络托管？
】如何将Angular2/4应用程序部署到网络托管？【英文标题】：Howtodeployanangular2/4applicationontowebhosting?【发布时间】：2018-10-0307:19:12【问题描述】：我已经创建了Angular4项目的本地副本，现在本地一切正常。所以我只想将Angular应用程... 查看详情
如何将带有 angular 2 前端（angular-cli build）的 spring-boot webapp 部署到 Tomcat？
】如何将带有angular2前端（angular-clibuild）的spring-bootwebapp部署到Tomcat？【英文标题】：HowcanIdeployaspring-bootwebappwithangular2frontend(angular-clibuild)toTomcat?【发布时间】：2017-10-2206:45:53【问题描述】：我有一个spring-bootweb应用程序，我使... 查看详情
将基本的 Angular 2 应用程序部署到 Google App Engine
】将基本的Angular2应用程序部署到GoogleAppEngine【英文标题】：DeployingbasicAngular2apptoGoogleAppEngine【发布时间】：2017-02-0811:59:48【问题描述】：我可以使用Angular2创建基本的前端应用程序，并且可以使用python在GoogleApp引擎上创建带有... 查看详情
如何使用 ng build --aot 部署 Angular 应用程序？
】如何使用ngbuild--aot部署Angular应用程序？【英文标题】：Hotodeployangularappwithngbuild--aot?【发布时间】：2020-10-0313:17:29【问题描述】：我在localhost中使用angular创建了一个网站，一切正常，在heroku中也可以正常工作，现在我想将页面... 查看详情
如何使用 Firebase 功能部署 Angular 9 通用应用程序
】如何使用Firebase功能部署Angular9通用应用程序【英文标题】：HowtodeployAngular9universalappwithfirebasefunctions【发布时间】：2020-06-1121:50:38【问题描述】：我最近更新到最新的Angular版本9并创建了一个应用程序。我使用以下命令使这个... 查看详情
使用 Angular 2 前端部署在 Heroku Java 应用程序上
】使用Angular2前端部署在HerokuJava应用程序上【英文标题】：DeployingonHerokuJavaappwithAngular2fronend【发布时间】：2017-04-1509:02:06【问题描述】：在使用Angular2前端部署基于Java的应用程序时，我遇到了一个问题。我的应用程序需要安装No... 查看详情
Bamboo - Angular 4 应用程序如何部署
】Bamboo-Angular4应用程序如何部署【英文标题】：Bamboo-Angular4appHowtodeploy【发布时间】：2017-09-2718:17:42【问题描述】：如何在竹子上部署我的Angular4应用程序？我只是做了一个简单的工作1.混帐2.npminstall3.ngbuild成功通过了，但接下来... 查看详情
如何在 iis 上部署 angular-cli 应用程序
】如何在iis上部署angular-cli应用程序【英文标题】：Howtodeployangular-cliapponiis【发布时间】：2016-12-2316:13:07【问题描述】：我有简单的angular2-cli应用程序（模型驱动形式的一页-不涉及路由器）。使用“ngserve”一切正常。我用ngbuild-... 查看详情
正确发布一个 grunt 项目
...operly【发布时间】：2014-07-1114:22:10【问题描述】：我正在使用Nexus来存储我的静态Web工件。作为一名前“Java开发人员”，我曾经经常使用Mavenreleaseplugin将我构建的工件部署到Nexus。我想为我的使用Grunt构建的Web项目找到一个等价... 查看详情