如何在 yeoman/grunt 项目中自动包含脚本？

IT技术 javascript gruntjs yeoman grunt-usemin
2021-03-19 02:49:45

我有一个工作自耕农项目。我正在使用 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 -->

这是冗长的。我希望能够做这样的事情：

在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 -->
1个回答

我使用了grunt-include-source

安装它：

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

在 Gruntfile 中：

在 initConfig 之前加载它：

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

在 initConfig 中配置 includeSource 本身：

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（如果您使用 yeoman）

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。

编辑：如何在 index.html 中包含您的 javascripts：

<!-- 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" -->
谢谢你。我不禁要说这似乎是不必要的复杂，但这并不是你的错。
2021-04-21 02:49:45
我将 Yeoman 与 angular 和 ionic/cordova 一起使用，对于这个示例（有效，谢谢！），您需要将 /www 视为分发文件夹。例如，includeSource:dist 应该指向 www/index.html。
2021-04-28 02:49:45
你的 HTML 索引文件是什么样的？我遵循了所有内容，但找不到如何使其工作，因为我不知道 HTML 注释标签，谢谢！
2021-05-11 02:49:45
另外，我的 grunt 文件有require('load-grunt-tasks')(grunt);所以我不需要使用 loadNpmTasks()
2021-05-15 02:49:45
@DanFritz 编辑了我的答案
2021-05-16 02:49:45
其它你可能感兴趣的问题
上一篇从请求 url 获取哈希参数 下一篇禁用输入中的空格，并允许后退箭头？