Проект Maven/JavaScript

Question

В настоящее время я работаю над приложением JavaScript, и я пытаюсь построить его как можно более модульно. То, что я планирую сделать, чтобы получить структуру папок, как

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

Я использую angularjs и я хочу, чтобы разделить все контроллеры и услуги в отдельные файлы.

Я разработчик Java, и я хочу использовать maven для создания этого проекта и его развертывания на tomcat.

В режиме производства я хочу, чтобы компрессор/обфускатор упаковывал все файлы в один application.js. Обычно, когда я строю свои проекты, у меня есть только один файл для всех контроллеров и один для всех сервисов и т. Д. Так что я делаю это один профиль для dev и один для live и с фильтрацией прилагает .min.js в моей index.html, чтобы включить все файлы (свернутый в прямом, без свернутого на Dev)

Наконец мой вопрос:

Каков наилучший способ сделать это с несколькими файлами?

В режиме разработки я хочу

<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.

Мне не нужно было использовать это, потому что мой код javascript был полностью разворачиваемым (развязка и все такое). Так что это хороший вариант использования для глотки. Взгляните на gulpfile.js от hottowel.

Сначала посмотрим на задачу сборки и ее зависимостей:

/** 
* 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 serve-dev 
gulp build 

Есть намного больше, поэтому прочитайте.

Я также работал над java + угловыми проектами, и он был удобен для развертывания и совместим с подходом java/maven для создания артефактов для кода javascript, который может быть сохранен в связи с привязкой и выбран для развертывания по мере необходимости.

Артефакт для яваскрипта коды просто почтовый файл, который я создаю с помощью следующей задачи глотка (без учета каталогов и файлов с ! перед именем каталога):

/** 
* 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 плагин:

/** 
* 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; 
}