Компоненты Concat Bower с ворчанием

Я создаю приложение, для которого требуется несколько интерфейсных библиотек lib/framework, таких как:

JQuery
JQueryUI
AngularJS
Фонд

Я использую bower для загрузки компонентов. На данный момент мой HTML выглядит так:

<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>

Моя цель состоит в том, чтобы сделать grunt script, который автоматически принимает установленные компоненты, конкатетно и минимизирует их и выводит их как lib.js.

Вопросы:

Со всеми моими исследованиями я выясню, как конкатрировать все файлы из каталога. Моя цель здесь состоит в том, чтобы получить компоненты bower и объединить их, не перечисляя их один за другим в файле grunt. Как я могу архивировать это?

Также возможно создать пользовательскую сборку jQuery UI с помощью только модулей, которые я хочу, вместо того чтобы иметь весь пользовательский интерфейс.

Спасибо.

Ответ 1

"Моя цель состоит в том, чтобы получить компоненты bower и объединить их, не перечисляя их один за другим в файле grunt"

Вы можете взять все файлы javascript из каталога зависимостей и подкаталогов и связать их таким образом:

grunt.config('concat.mydeps', {
  files: [{
    src: ['components/**/*.js'],
    dest: 'dist/lib.js'
  }]
})

... но если порядок выполнения script важен, это рецепт катастрофы: -).

Кроме того, вполне вероятно, что эта папка будет содержать мини-и неминифицированные версии, что приведет к тому, что вы дважды включите несколько скриптов...

Способ избежать этого побочного эффекта будет в строке:

grunt.config('concat.mydeps', {
  files: [{
    src: ['components/**/*.js', '!components/**/*min.js'],
    dest: 'dist/lib.js'
  }]
})

... но опять же, это, безусловно, не пуленепробиваемый - данный компонент может очень хорошо иметь встроенную версию и расщепленный источник рядом.

IMHO, единственный разумный выход - явно указать файлы, которые вы хотите агрегировать, в том порядке, в котором вы нуждаетесь (так же, как вы делаете сейчас в своем html).

Ответ 2

usemin - ваш друг здесь.

Установить usemin, copy, concat и uglify:

npm install --save-dev grunt-usemin
npm install --save-dev grunt-contrib-copy
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-uglify

Настроить блок сборки в вашем HTML файле:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <!-- build:js lib.js -->
    <script src="components/jquery/jquery.js"></script>
    <script src="components/angular/angular.js"></script>
    <script src="components/etc/etc.js"></script>
  <!-- endbuild -->
</head>
<body>
<h1>usemin</h1>
</body>
</html>

Настройте свой файл Grunt:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    copy: {
      dist: {
        files: [ {src: 'index.html', dest: 'dist/index.html'} ]
      }
    },

    'useminPrepare': {
      options: {
        dest: 'dist'
      },
      html: 'index.html'
    },

    usemin: {
      html: ['dist/index.html']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-usemin');

  grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'uglify', 'usemin']);
};

Run grunt

grunt

Результаты:

├── Gruntfile.js
├── components
│   ├── angular
│   │   └── angular.js
│   ├── etc
│   │   └── etc.js
│   └── jquery
│       └── jquery.js
├── dist
│   ├── index.html
│   └── lib.js
├── index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <script src="lib.js"></script>
</head>
<body>
<h1>usemin</h1>
</body>
</html>