Я пытаюсь Grunt и нужен простой способ объединить мои модули

Это мой первый раз с использованием Grunt, и я бы хотел, чтобы он объединил все мои js-модули, каждый из которых был завершен в немедленно исполняемую функцию, содержащую объявление "use strict" и помещая их в один файл, завернутый только в одной немедленно исполняющей функции, только с одним объявлением 'use strict'.

Как это обычно делается?

Я понял, что это будет распространенный случай использования? Возможно, я поступил неправильно? Должен ли я использовать один из форматов загрузки модуля (т.е. Commonjs, amd). Все эти файлы всегда будут загружаться вместе в браузере, поэтому я бы не отказался удалить все сразу исполняемые функции, если это обычно происходит с людьми. Важная часть состоит в том, что конечный результат каким-то образом завернут, проходит тесты lint и unit и содержит объявление "use strict".

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

Ответы

Ответ 1

Я обычно делаю это как команда jQuery делает это. Вы создаете intro.js и outro.js и помещаете все остальное между ними:

intro.js

;(function( window, undefined ){
  'use strict';

outro.js

}( window ));

grunt.js

concat: {
  dist: {
    src: [
      'js/src/intro.js',
      ...
      'js/src/outro.js'
    ],
    dest: 'js/out/app.js'
  }
}

Ответ 2

Как и pull request 10, grunt-contrib-concat теперь имеет параметр footer. Вместо интро и файла outro я бы использовал баннер и нижний колонтитул.

Gruntfile.js

concat: {
  dist: {
    src: ['src/my-lib.js'],
    dest: 'dist/<%= pkg.name %>.js',
    options: {
      banner: ";(function( window, undefined ){ \n 'use strict';",
      footer: "}( window ));"
    }
  }
}

По-моему, это более удобно и позволяет использовать шаблоны, используя другие свойства, определенные в вашем файле Grunt.

Ответ 3

Просто хочу добавить к @elclanrs ответ, что если вы хотите сохранить свои модули в отдельных файлах для более легкой отладки во время разработки, вам, очевидно, придется обернуть их с помощью intro.js и outro.js. Используя встроенную задачу concat, вам нужно написать что-то вроде:

concat: {
  events_debug: { // wrap the 'events' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/events.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/events.js'
  },
  callbacks_debug: { // wrap the 'callbacks' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/callbacks.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/callbacks.js'
  }

  // zzZZZ...
}

Это очень утомительно и самоповторяется. Возможно, вы захотите создать настраиваемую задачу для файлов массовой упаковки, например.

wrap: {
    html: {
        intro: 'partials/intro.js',
        outro: 'partials/outro.js',
        src: 'js/*.js',
        dest: 'out' // output directory
    }
}

В последнее время возник вопрос об этом:

Используя grunt concat, как бы я мог автоматизировать конкатенацию одного и того же файла ко многим другим файлам?

Ответ 4

Я бы рекомендовал использовать мой плагин grunt grunt-concat-deps, так как он автоматически разрешает ваши модули независимо от вашей архитектуры.

PLUS: вам не нужна явная конфигурация модуля для плагина, поскольку он использует определение декларативного и децентрализованного модуля в стиле YUIDoc.

См. дополнительную информацию: https://github.com/leoselig/grunt-concat-deps