javascript - Maven/JavaScript 项目

Question

目前我正在开发一个 JavaScript 应用程序，并尝试尽可能模块化地构建它。我打算做的是获得像这样的文件夹结构

js
|__ controllers
|__ services
|__ directives
index.html

我正在使用 angularjs，我想将所有 Controller 和服务拆分为单独的文件。

我是一名Java开发人员，我想使用maven来构建这个项目并将其部署在tomcat上。

在生产模式下，我想要一个压缩器/混淆器将所有文件打包到一个 application.js 中。通常，当我构建项目时，我只有一个用于所有 Controller 的文件和一个用于所有服务的文件，依此类推。所以我正在做的是为 dev 创建一个配置文件，为 live 创建一个配置文件，并通过过滤将 .min.js 添加到我的 index.html 中包含所有文件(实时最小化，开发时非最小化)

最后我的问题:

处理多个文件的最佳方法是什么？

在开发模式下我想要

<script type="text/javascript" src="MyFirstController.js">
<script type="text/javascript" src="MySecondController.js">
<script type="text/javascript" src="MyThirdController.js">
<script type="text/javascript" src="MyFirstService.js">
/* ... */

在生产模式下，我只希望我的 index.html 中包含一个文件

<script type="text/javascript" src="myapp.js">

第一个解决方案，但显然不是一个非常漂亮的解决方案，是在我的 Maven 文件中有一个多行属性，我在其中获取所有脚本标签，然后用过滤替换它们。

我希望有人能告诉我一个好的解决方案来解决我的问题。提前致谢!

Answer 1

看看frontend-maven-plugin 。如果您想将脚本与 Maven Artifact 捆绑在一起，这非常有用。

我不需要使用这个，因为我的 javascript 代码是完全独立的可部署的(解耦等等)。所以这是 gulp 的一个很好的用例。查看 hottowel 中的 gulpfile.js .

首先看一下构建任务及其依赖项:

/**
 * Build everything
 * This is separate so we can run tests on
 * optimize before handling image or fonts
 */
gulp.task('build', ['optimize', 'images', 'fonts', 'test-server'], function() {
    log('Building everything');

    var msg = {
        title: 'gulp build',
        subtitle: 'Deployed to the build folder',
        message: 'Running `gulp serve-build`'
    };
    del(config.temp);
    log(msg);
    notify(msg);
});

这些应该可以完成您想要的大部分操作。还有特定于环境的 gulp 任务:

gulp serve-dev
gulp build

里面还有很多内容，请仔细阅读。

我还参与过 java + Angular 项目，它的部署非常方便，并且与 java/maven 方法一致，可以为 javascript 代码创建 Artifact ，这些 Artifact 可以存储在 nexus 上，并在需要时获取以进行部署。

JavaScript 代码的 Artifact 只是一个 zip 文件，我使用以下 gulp 任务创建该文件(忽略目录名称前面带有 ! 的目录和文件):

/**
 * Create a versioned artefact
 */

    gulp.task('generate-artifact', function() {
        var filename = getFilename();
        return gulp
            .src([
                './**/*.*',
                '!artifacts/',
                '!artifacts/**',
                '!build/',
                '!build/**',
                '!node_modules/',
                '!node_modules/**',
                '!bower_components/',
                '!bower_components/**'
                ])
            .pipe($.tar(filename + '.tar'))
            .pipe($.gzip())
            .pipe(gulp.dest('./artifacts/'));
    });

然后使用nexus-deployer部署到nexus插件:

/**
 * Deploy release to nexus
 */ 
gulp.task('deploy-release', ['clean-pomdir'], function(cb) {
    var deployer = require('nexus-deployer');
    var filename = getFilename();
    var pkg = require('./package.json');

    log('Retrieving artifact ' + filename + '.tar.gz' + 'from artifacts dir');
    log('Deploying version ' + pkg.version + ' of ' + pkg.name);

    var release = {
        groupId: 'my.group.id',
        artifactId: 'my-artefact',
        version: pkg.version,
        packaging: 'tar.gz',
        auth: {
            username: args.username,
            password: args.password
        },
        pomDir: config.pomDirReleases,
        url: 'http://path-to-nexus.repo',
        artifact: './artifacts/' + filename + '.tar.gz',
        noproxy: '',
        cwd: ''
    };

    deployer.deploy(release, cb);
});

里面还有一些自定义方法和配置:伟大的 yargs模块将用户名和密码作为命令行参数传递； gulpfile.js 中获取文件名的便捷方法:

function getFilename() {
    var pkg = require('./package.json');
    var filename = pkg.name + '_' + pkg.version;
    return filename;
}