Question

我已将Angularjs应用程序分解为模块，并将其组件分成各自的文件。

/app
    /components
        calendar.directive.js
        calendar.directive.html
    /people
        people.html
        people-view.html
        people.controller.js
    /event
        event.html
        event-view.html
        event.controller.js
        event.service.js

我对此部分不太确定。在构建应用程序时，是否需要调用所有这些文件？

<script src="calendar.js"></script>
<script src="people.controller.js"></script>
<script src="event.controller.js"></script>

或者有没有办法将所有这些组合成一个文件并立即调用所有文件？

Answer 1

您可以将所有js模块合并到一个文件中，但是您需要将视图保存在单独的文件中，因为您要按文件名包含视图。

您可以使用Gulp来合并和缩小所有内容，这会缩短您的时间。

只需要做一件事就是将inject模块用于另一个控制器或服务，而不是使用直接功能的用户数组。对于前。

//This will break your application after minification process.
angular.controller('myController', function($scope) {

})

//Use this schema which will be useful after minification process
angular.controller('myController', ['$scope', function($scope) {

  }
])

Answer 2

是的，AngularJS文档提供了一篇冗长的文章，介绍了在缩小AngularJS应用程序时需要注意的事项：

https://docs.angularjs.org/tutorial/step_05

要注意的主要事情是缩小可以打破＆＃34;魔法依赖注入＆＃34;如果您正在使用它，但有办法管理它。

Answer 3

我正在使用maven构建系统来执行此操作。这篇文章假定了Maven的知识。还需要进行更改，如另一个答案所述，必须对Angularjs代码进行修改以允许缩小。

以下是POM配置文件的示例

<profiles>
    <profile>
    <id>release</id>
    <build>
        <plugins>
        <plugin>
            <groupId>com.samaxes.maven</groupId>         
            <artifactId>minify-maven-plugin</artifactId>         
            <version>1.6.2</version>         
            <executions>             
                <execution>
                    <id>default-minify</id>
                    <phase>prepare-package</phase><!-- When omitted defaults to 'process-resources' -->
                    <configuration>
                        <charset>UTF-8</charset>
                        <jsSourceDir>app</jsSourceDir>
                        <jsSourceIncludes>
                            <jsSourceInclude>app.js</jsSourceInclude>
                            <jsSourceInclude>**/*.js</jsSourceInclude>
                        </jsSourceIncludes>
                        <jsTargetDir>min/js</jsTargetDir>
                        <jsFinalFile>app-min-final.js</jsFinalFile>
                        <jsEngine>CLOSURE</jsEngine>
                    </configuration>
                    <goals>
                        <goal>minify</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

        <plugin>
            <artifactId>maven-antrun-plugin</artifactId>
            <version>1.7</version>
            <executions>
                <execution>
                    <phase>prepare-package</phase>
                    <configuration>
                        <tasks>
                        </tasks>
                    </configuration>
                    <goals>
                        <goal>run</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
        </plugins>
    </build>
    </profile>
<profiles>

这使用minify-maven-plugin。

在maven package阶段之前，执行以下prepare-package阶段。

您可以指定源目录（jsSourceDir）和输出目录（jsTargetDir）。

要打包战争，您需要使用下面的maven-war-plugin插件

  <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.3</version>
        <executions>
            <execution>
                <id>prepare-war</id>
                <phase>prepare-package</phase>
                <goals>
                    <goal>exploded</goal>
                </goals>
            </execution>
            <execution>
                <id>default-war</id>
                <phase>package</phase>
                <goals>
                    <goal>war</goal>
                </goals>
                <configuration>
                    <webXml>src/main/webapp/WEB-INF/web.xml</webXml>
                    <warSourceDirectory>${project.build.directory}/${project.build.finalName}</warSourceDirectory>
                    <warSourceExcludes>app/**.js</warSourceExcludes>
                </configuration>
            </execution>
        </executions>
    </plugin>

Answer 4

你可以使用grunt。 Grunt有ngmin模块，负责angularjs特定的最小化。下面是片段任务，可用于最小化和其他优化。更多细节可以在http://java.dzone.com/articles/using-grunt-angularjs-front

找到


 grunt.registerTask('build', [
        'clean:dist',
        'ngconstant:production',
        'compass:server',
        'useminPrepare',
        'concat',
        'ngmin',
        'copy:dist',
        'cssmin',
        'uglify',
        'rev',
        'usemin',
        'htmlmin'
    ]);

Answer 5

在代码的构建版本中查看John Papa style guide about minification有关如何执行此操作的提示

对于您的开发环境，您不希望缩小并手动添加这些文件会很快烦人。查看 Hottowel Yeoman generator （主要是gulp），了解如何将其设置为自动注入index.html

如果你熟悉语法

，这是gulp的片段

gulp.task('wiredep', function() {
log('Wiring the bower dependencies into the html');

var wiredep = require('wiredep').stream;
var options = config.getWiredepDefaultOptions();

return gulp
    .src(config.index)
    .pipe(wiredep(options))
    .pipe($.inject(gulp.src(config.js)))
    .pipe(gulp.dest(config.client));
 });

如何缩小AngularJS模块

5 个答案: