[英]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>
... 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 -->
安装它:
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 %>'
}
},
我已经习惯了subasks: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" -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.