如何将脚本自动包含在yeoman / grunt项目中？ [英] How to include scripts automatically in a yeoman/grunt project?

问题描述

我有一个可以工作的项目。我使用的是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> 
 ...更多的库如下
 
< 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 
 
< 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个以上
 
< 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  - > 
 
<！ - 库包含之前 - > 
< script src =/ bower_components / jquery / jquery.min.js>< / script> 
< script src =/ bower_components / underscore / underscore-min.js>< / script> 
 ... 
 
<！ - 替换应用程序包括： - > 
< script src =<％'/scripts/**/*.js'％>>< / script> 
 
<！ -  endbuild  - > 
  

解决方案

我用 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：{
asePath：'app'，
 baseUrl：'/'，
}，
服务器：{
文件：{
'.tmp / index.html'：'<％= yeoman.app％> /index.html'
} 
}，
 dist：{
文件：{
'<％= yeoman.dist％> /index.html' ：'<％= yeoman.app％> /index.html'
} 
} 
} 
  

在你想要的地方添加这个任务（这里，我将它添加到构建任务中）：

  grunt.registerTask（'build'，[
'clean：dist'，
'includeSource：dist'，
'useminPrepare'，
 ... 
  

将它添加到监视任务：

 手表：{
 ...，
 includeSource：{
f iles：['<％= yeoman.app％> /index.html']，
 tasks：['includeSource：server'] 
} 
  
 
 
 
更改useminPrepare（如果您使用yeoman）
 
 
  useminPrepare：{
 //将应用程序更改为dist，将include.html处理的index.html作为dist 
处理html：'<％= yeoman.dist％> /index.html'，
选项：{
 dest：'<％= yeoman.dist％>'
} 
}，
  
我曾经使用子任务：dist和服务器在不同的目录中生成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> 
 
 <！ -   - 入口点 - > 
< script src =/ scripts / config.processed.js>< / script> 
< script src =/ scripts / app.js>< / script> 
 
 <！ - 包含脚本中的所有内容/脚本内部的文件除外（不包含子目录） - > 
 <！ - 包含：type：js，files：[scripts / ** / *。js，！scripts / *。js]  - > 
 
<！ -  endbuild  - > 
  
如果您想要包含所有脚本，请执行以下操作： 
 
 
 <！ -  include：type：js，files：scripts / ** / *。js - > 
  
 
I have a working yeoman project. I am using grunt-usemin.


To include javascripts, I do this in 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 -->
This is verbose. I would like to be able to do something like this:

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 -->

解决方案
I used grunt-include-source

Install it:
npm install grunt-include-source --save-dev
In Gruntfile:

Load it before initConfig:
module.exports = function (grunt) {
  ...
  grunt.loadNpmTasks('grunt-include-source');
Configure includeSource itself in 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'
        }
      }
    }
Add this task where you want (here, I add it to the build task):
grunt.registerTask('build', [
    'clean:dist',
    'includeSource:dist',
    'useminPrepare',
    ...
Add it to the watch task:
watch: {
  ...,
  includeSource: {
    files: ['<%= yeoman.app %>/index.html'],
    tasks: ['includeSource:server']
  }
Change useminPrepare (if you use 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 %>'
  }
},
I've used to subtasks: dist and server to generate the index.html in different directories.



Edit: How to include your javascripts in 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 -->
If you want to include everything scripts, do this:
<!-- include: "type": "js", "files": "scripts/**/*.js" -->


                        
这篇关于如何将脚本自动包含在yeoman / grunt项目中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！