Управление пакетами Javascript с помощью Bower и grunt

Итак, в моем проекте мой javascript состоит из

  • Сторонние библиотеки (jquery, bootstrap, плагины jquery и т. д.)
  • Пользовательские библиотеки
  • Код, встроенный в html в файлах представления между <script>$(function(){});</script>

Довольно стандартные вещи.

Моя цель состояла в том, чтобы найти надежный автоматизированный способ минимизировать все мои отдельные файлы javascript (около 25 файлов) в один файл для производства.

Я установил bower, и мне кажется, это хороший способ обновлять мои внешние библиотеки. Я также установил grunt. Я использую плагин Bower в grunt, который копирует все загруженные файлы в указанный каталог, затем concat может просматривать этот каталог, чтобы объединить их, и, наконец, uglifyJS минимизирует файл. Опять же, это похоже на стандартную настройку ворчания.

Плагин Bower создаст папку, например

vendorjs

 - bootstrap.js
 - jquery.js
 - etc

Затем concat будет читать из этого каталога, и, поскольку файлы расположены в алфавитном порядке, объединит их в неправильном порядке, загрузится перед jquery, поэтому он не будет использоваться.

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

Есть ли какая-то конфигурация, которую мне не хватает, которая поможет решить мою проблему? Я иду об этом в неправильном пути?

Редактировать это мой Gruntfile.js для большей ясности.

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bower: {
        dev: {
            dest: 'vendorjs',
            options: {
                stripJsAffix: true
            }
        }
    }
    concat: {
        options: {
            separator: ';'
        },
        dist: {
            src: ['vendorjs/*.js'],
            dest: 'vendor.js'
        }
    },
    uglify: {
        dist: {
            files: {
                '../../public/js/admin/vendor.min.js': ['vendor.js']
            }
        }
    }
});

};


bower concat gruntjs uglifyjs
person JasonM    schedule 20.06.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, как выглядит ваш конфиг, но вы можете легко указать порядок файлов в grunt-contrib-concat:

grunt.initConfig({
  concat: {
    dist: {
      src: ['src/jquery.js', 'src/bootstrap.js'],
      dest: 'dist/built.js'
    }
  }
});
person Sindre Sorhus    schedule 20.06.2013
comment
спасибо за ваш ответ, проблема в том, что я пытаюсь все автоматизировать, поэтому любые зависимости обрабатываются автоматически, поэтому я не хочу указывать точные файлы. Но это может быть неправильный подход. - person JasonM; 20.06.2013
comment
У вас не может быть и того, и другого. Либо вы указываете, либо нет (что приводит к алфавитному порядку). Похоже, RequireJS — это то, что вам нужно, но у него есть свои недостатки. - person Sindre Sorhus; 20.06.2013
comment
Да, было ощущение, что захожу в тупик, большое спасибо за помощь в прояснении ситуации. - person JasonM; 20.06.2013
comment
Если вам не нравятся накладные расходы RequireJs, я бы по-прежнему рекомендовал использовать AMD с меньшим загрузчиком, например, almond.js. github.com/jrburke/almond Преимущество AMD в том, что вы можете объединять файлы любым удобным для вас способом. и они все равно будут выполняться в правильном порядке. Для небольших проектов я бы рекомендовал это. - person Martin Hansen; 30.06.2013
comment
@Мартин Хансен. Хотите добавить ответ на основе AMD? - person tutuca; 22.08.2014