Как автоматически включать скрипты в проект yoman/grunt?

У меня есть рабочий проект йомена. Я использую grunt-usemin.

Чтобы включить javascripts, я делаю это в index.html:

<!-- build:js scripts/includes.js -->
<script src="/bower_components/jquery/jquery.min.js"></script>
<script src="/bower_components/underscore/underscore-min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/bower_components/angular-ui-date/src/date.js"></script>
<script src="/bower_components/angulartics/src/angulartics.js"></script>
<script src="/bower_components/angulartics/src/angulartics-ga.js"></script>
<script src="/bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="/assets/vendor/bootstrap.2.3.1.min.js"></script>
... a few more libs like that

<script src="/scripts/config.processed.js"></script>
<script src="/scripts/app.js"></script>

<script src="/scripts/controllers/first_controller.js"></script>
<script src="/scripts/controllers/second_controller.js"></script>
<script src="/scripts/controllers/third_controller.js"></script>
<script src="/scripts/controllers/fourth_controller.js"></script>
<script src="/scripts/controllers/fith_controller.js"></script>
<script src="/scripts/controllers/sixth_controller.js"></script>
<script src="/scripts/controllers/seventh_controller.js"></script>
... 20 more like that

<script src="/scripts/directives/first_directive.js"></script>
<script src="/scripts/directives/second_directive.js"></script>
<script src="/scripts/directives/third_directive.js"></script>
... 10 more like that

<script src="/scripts/services/first_service.js"></script>
<script src="/scripts/services/second_service.js"></script>
...

<script src="/scripts/filters/first_filter.js"></script>
<script src="/scripts/filters/second_filter.js"></script>
...
<!-- endbuild -->

Это многословно. Я хотел бы иметь возможность сделать что-то вроде этого:

In index.html:

<!-- build:js scripts/includes.js -->

<!-- library includes as before -->
<script src="/bower_components/jquery/jquery.min.js"></script> 
<script src="/bower_components/underscore/underscore-min.js"></script>
...

<!-- Replace application includes with this: -->
<script src="<% '/scripts/**/*.js' %>"></script>

<!-- endbuild -->

javascript gruntjs yeoman grunt-usemin
person Benjamin Crouzier    schedule 20.01.2014    source источник

Ответы (1)


arrow_upward
41
arrow_downward

Я использовал grunt-include-source

Установите его:

npm install grunt-include-source --save-dev

В Gruntfile:

Загрузите его перед initConfig:

module.exports = function (grunt) {
  ...
  grunt.loadNpmTasks('grunt-include-source');

Настройте сам includeSource в initConfig:

grunt.initConfig({
  ...,
  includeSource: {
      options: {
        basePath: 'app',
        baseUrl: '/',
      },
      server: {
        files: {
          '.tmp/index.html': '<%= yeoman.app %>/index.html'
        }
      },
      dist: {
        files: {
          '<%= yeoman.dist %>/index.html': '<%= yeoman.app %>/index.html'
        }
      }
    }

Добавьте эту задачу туда, куда хотите (здесь я добавляю ее в задачу сборки):

grunt.registerTask('build', [
    'clean:dist',
    'includeSource:dist',
    'useminPrepare',
    ...

Добавьте его в задачу наблюдения:

watch: {
  ...,
  includeSource: {
    files: ['<%= yeoman.app %>/index.html'],
    tasks: ['includeSource:server']
  }

Измените useminPrepare (если вы используете йомен)

useminPrepare: {
  // changed from app to dist, to take index.html processed by includeSource in dist
  html: '<%= yeoman.dist %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>'
  }
},

Я использовал подзадачи: dist и server для создания index.html в разных каталогах.

Изменить: как включить ваши сценарии JavaScript в index.html:

<!-- build:js({.tmp,dist,app}) /scripts/application.js -->
<!-- vendor, external -->
<script src="/bower_components/jquery/jquery.min.js"></script>
<script src="/bower_components/underscore/underscore-min.js"></script>
<script src="/assets/vendor/underscore.extentions.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/select2/select2.js"></script>
<script src="/bower_components/angular-ui-select2/src/select2.js"></script>

<!-- entry point -->
<script src="/scripts/config.processed.js"></script>
<script src="/scripts/app.js"></script>

<!--include everything in scripts/ except files directly inside scripts (without subdirectory) -->
<!-- include: "type": "js", "files": ["scripts/**/*.js", "!scripts/*.js"] -->

<!-- endbuild -->

Если вы хотите включить все сценарии, сделайте следующее:

<!-- include: "type": "js", "files": "scripts/**/*.js" -->
person Benjamin Crouzier    schedule 26.01.2014
comment
На что был похож ваш индексный файл HTML? Я следил за всем, но не могу найти, как заставить это работать, потому что я не знаю теги комментариев HTML, спасибо! - person DanFritz; 20.03.2014
comment
@DanFritz Отредактировал мой ответ - person Benjamin Crouzier; 21.03.2014
comment
Я использую Yeoman с angular и ionic/cordova, и для этого примера (который работает, спасибо!) вам нужно думать о /www как о папке дистрибутива. Например, includeSource:dist должен указывать на www/index.html. - person FugueWeb; 26.11.2014
comment
Кроме того, в моем файле grunt есть require('load-grunt-tasks')(grunt);, поэтому мне не нужно было использовать loadNpmTasks(). - person FugueWeb; 26.11.2014
comment
Кроме того, вы можете просто создать файл в том же каталоге (перезаписать) с помощью grunt serve и настроить его для загрузки в www на build - person FugueWeb; 26.11.2014
comment
Спасибо. Не могу не заметить, что это кажется излишне сложным, но вряд ли это ваша вина. - person Casey; 16.03.2016
comment
Обновление мне очень помогло. Просто испортил индексный файл. Согласитесь с @casey, grunt-include-source необходим (или не должен быть) :) +1 за хорошее объяснение. - person davidkonrad; 23.04.2017