Как настроить Grunt для замены зависимостей Bower с помощью мини-версий

Я новичок в Yeoman/Grunt/Bower. У меня есть файл bower.json, который определяет следующие зависимости:

bower.json

{
    "dependencies": {
        "angular": "~1.0.7",
        "jquery": "~1.8.0",
        "bootstrap": "~2.3.2",
        "angular-grid": "~2.0.5"
    }
}

В моем html файле я использую неминифицированные версии этих библиотек, которые я установил с помощью команды bower install

index.html

<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>

Как настроить grunt, поэтому он будет:

Скопируйте только уменьшенные версии этих js файлов в каталог сборки
Замените HTML, чтобы он изменился, например. jquery.js до jquery.min.js
Если вы не используете CDN - рекомендуется ли комбинировать все файлы вместе с пользовательским приложением script?

Каков правильный подход? Должен ли я определять каждую библиотеку в задаче копирования? Как:

Gruntfile.js:

copy: {
  dist: {
    files: [{
      src: [
        'components/jquery/jquery.min.js',
        'components/bootstrap/docs/assets/js/bootstrap.min.js',
        'components/angular/angular.min.js',
        'components/angular-grid/build/ng-grid.min.js'
      ]
    }]
  }
}

Ответ 1

Минимизированные версии библиотек JavaScript, которые вы используете, в конечном итоге не будут поставляться с модулями Bower. Минимизация и конкатенация - это не то, за что отвечает менеджер пакетов, но ваш конвейер сборки.

С Yeoman рекомендуется использовать grunt-usemin, который позаботится обо всех необходимых шагах. Вы можете увидеть пример этого, когда выкладываете новое приложение с yo webapp и смотрите на сгенерированные Gruntfile.js и index.html.

В вашем случае вам нужно добавить комментарий вокруг вашего script, который включает:

<!-- build:js scripts/main.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>
<!-- endbuild -->

И убедитесь, что у вас есть соответствующие задачи usemin в конвейере Grunt:

useminPrepare: {
    options: {
        dest: 'dist'
    },
    html: 'app/index.html'
},
usemin: {
    options: {
        dirs: ['dist']
    },
    html: ['dist/{,*/}*.html'],
    css: ['dist/styles/{,*/}*.css']
},

Ответ 2

не нужно менять html, попробуйте grunt-contrib-uglify

uglify: {
  libs: {
    files: [
      {
        expand: true,
        cwd: 'components',
        src: '**/*.js',
        dest: 'build/components'
      }
    ]
  }
}

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

Ответ 3

Другой вариант, если вы заинтересованы в использовании мини-javascript, а также иметь версию пакета в пути include, должен использовать grunt-version-copy-bower-components. Этот плагин grunt обрабатывает копирование компонента bower в целевой каталог, включает в себя версию компонента в пути к компоненту и изменяет файлы ссылок (html и css) для использования миниатюрного пути с версией.

Включение версии в путь компонентов может быть полезно, если сайт размещен с кешем (за CDN). Он позволяет указать длительные периоды кэширования компонентов панели. При переключении на новую версию компонента bower URL-адрес будет новым, и кеш будет извлекать новый, вместо того, чтобы обслуживать устаревший компонент.

Пример конфигурации:

versionCopyBowerComponents: {
  options: {
    exclude: ['underscore'],
    dest: 'dist/libs',
    filesReferencingComponents: {
      files: ['dist/test.html', 'dist/test.css'],
      useComponentMin: true
    }
  }
}

Плагин определит компоненты панели, используемые вашим проектом, и автоматически установит их на путь, указанный в dest. Файлы, перечисленные в файлахReferencingComponents- > files, являются файлами, которые включают/источник компонента bower. Указание useComponentMin приведет к выбору мини-версии компонента.

Ответ 4

Было бы плохой практикой минимизировать себя библиотеку, которая уже существует в мини-версии. К счастью, хотя бы для angularJS, пакет bower включает в себя angular.min.js.map файл. С этой исходной картой я думаю, что нет смысла включать в какой-либо момент неминифицированный файл в источник. Просто включите файл min, оставьте его вне Grunt minifier и дайте браузеру перейти к неминифицированному источнику.