前端开发工作流程与angularjs和gruntjs

发布时间：2020-12-17 09:17:50 所属栏目：安全来源：网络整理

导读：当我们使用 HTML 5和angularjs时,我想知道前端开发工作流是如何组织的. 我们使用Jetty java后端(不能更改),并且我们要公开角度可以消耗的静态服务. 使用angularjs,主页需要包含许多js文件,其中大部分是特定于应用程序的,我们打算在js文件中逻辑地分割应用程

当我们使用 HTML 5和angularjs时,我想知道前端开发工作流是如何组织的.

我们使用Jetty java后端(不能更改),并且我们要公开角度可以消耗的静态服务.

使用angularjs,主页需要包含许多js文件,其中大部分是特定于应用程序的,我们打算在js文件中逻辑地分割应用程序.

那么你如何推荐使用前端开发工作流？为了避免处理这么多不同的js文件,同事们已经建议使用grunt.js来使用js文件的缩小,但是一旦被细化就变得难以从我的IDE …

我们还应该在开发过程中使用缩小,这可以在部署之前被推到一个阶段等等,所以在开发过程中,我们使用未破解的js文件,然后将其细化为生产版本？

如果可能,请同时建议如何处理index.html中的脚本导入

基本上,我们是这种开发方式的新手,直到最近我们使用JSF来表达我们的观点,但是我们现在想检查一下基于JS的库,看看它们是否可以提高生产率.

很好的问题我的团队也遇到了这些问题.您将要熟悉的是Grunt.js对象符号.你可以做以下事情：

thetask: {
  dev: {
    src: [
      ['build/_compile','build/development/**']
    ]
  },prod: {
    src: [
      ['build/_compile','build/production/**']
    ]
  },},grunt.registerTask('package:dev',['thetask:dev']);
grunt.registerTask('package:prod',['thetast:prod']); 

~# grunt package:dev

“使用angularjs,我们打算在js文件中逻辑地分割应用程序.

看看grunt-html-build.您可以根据您的grunt文件中的规则动态地包含文件,如下所示：

htmlbuild: {
    dev: {
        src: 'app/index.html',dest: 'build/development',options: {
            styles: {
                bundle: [ 
                    'build/development/css/app.css',]
            },scripts: {
                bundle: [
                    // Bundle order can be acheived with globbing patterns.
                    // See: https://github.com/gruntjs/grunt/wiki/Configuring-tasks#globbing-patterns
                    'build/development/js/angular.js','build/development/js/angular-resource.js','build/development/js/nginfinitescroll.js','build/development/js/*.js',}
    },prod: {
        src: 'app/index.html',dest: 'build/production',options: {
            styles: {
                bundle: [ 
                    'build/production/css/app.css',scripts: {
                bundle: [
                    'build/production/js/app.js',

然后在你的索引：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Playground 3</title>
<!-- build:style bundle -->
<!-- /build -->
</head>
<body>
<div ng-include src="'/views/global.navbar.html'"></div>
<div ng-view class="container"></div>
<div ng-include src="'/views/global.footer.html'"></div>
<!-- build:script bundle -->
<!-- /build -->
</body>
</html>

“我们还应该在开发过程中使用minization,我们使用unminified js文件,但是将它们细化为生产版本？

只需选择在您的构建中包含以下任务即可：

grunt.registerTask('package:dev',['thetast:prod','concat:prod','minify:prod']);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!