grunt 自动插入你的 javascript 文件
grunt auto insert your javascript files
我刚刚开始掌握 usemin 和 wiredep。我的 index.html 文件中有这个:
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->
如果我运行g运行t构建,则index.html修改为这个:
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-notify/src/styles/ng-notify.css" />
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->
这很好,但它只发生在 bower:css 文件(我相信这是用 wiredep. 在我的页面下方,我有类似于 JavaScript 的文件,它也可以工作。
我想为我自己的 JavaScript 个文件做这件事。目前我有大约 100 个,我已经手动将它们放入我的 src/index.html。构建我的应用程序时,usemin 将我的脚本替换为合并后的丑化版本,这很棒。但是当我构建时,我希望 src/index.html 从 src/app[=31 获取所有脚本=] 目录并将它们注入我的 html 文件。
这可以做到吗?
我设法使用 grunt-injector 解决了这个问题。
我将 Gruntfile 配置为使用 grunt-injector,如下所示:
// Automatically inject my components into index.html
injector: {
options: {
template: '<%= yeoman.app %>/index.html'
},
html: {
options: {
transform: function (filePath) {
return '<script type="text/ng-template" src="' + filePath.replace('/src/', '') + '"></script>';
}
},
files: {
'<%= yeoman.app %>/index.html': [
'<%= yeoman.app %>/app/**/*.html'
]
}
},
scripts: {
options: {
transform: function (filePath) {
return '<script src="' + filePath.replace('/src/', '') + '"></script>';
}
},
files: {
'<%= yeoman.app %>/index.html': [
'<%= yeoman.app %>/app/**/*.module.js',
'<%= yeoman.app %>/app/**/*.js'
]
}
},
styles: {
options: {
transform: function (filePath) {
var media = filePath.indexOf('print') > -1 ? 'print' : 'screen';
return '<link rel="stylesheet" media="' + media + '" href="' + filePath.replace('/.tmp/', '') + '" />';
}
},
files: {
'<%= yeoman.app %>/index.html': [
'.tmp/styles/**/*.css'
]
}
}
},
然后在我的 index.html 中,我只是把 injector 评论像这样:
<!-- injector:css -->
<!-- endinjector -->
已转换为:
<!-- injector:css -->
<link rel="stylesheet" media="screen" href="styles/core.css" />
<link rel="stylesheet" media="print" href="styles/print.css" />
<!-- endinjector -->
就是这样。
我刚刚开始掌握 usemin 和 wiredep。我的 index.html 文件中有这个:
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->
如果我运行g运行t构建,则index.html修改为这个:
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-notify/src/styles/ng-notify.css" />
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/core.css -->
<link rel="stylesheet" href="styles/core.css">
<!-- endbuild -->
这很好,但它只发生在 bower:css 文件(我相信这是用 wiredep. 在我的页面下方,我有类似于 JavaScript 的文件,它也可以工作。 我想为我自己的 JavaScript 个文件做这件事。目前我有大约 100 个,我已经手动将它们放入我的 src/index.html。构建我的应用程序时,usemin 将我的脚本替换为合并后的丑化版本,这很棒。但是当我构建时,我希望 src/index.html 从 src/app[=31 获取所有脚本=] 目录并将它们注入我的 html 文件。
这可以做到吗?
我设法使用 grunt-injector 解决了这个问题。 我将 Gruntfile 配置为使用 grunt-injector,如下所示:
// Automatically inject my components into index.html
injector: {
options: {
template: '<%= yeoman.app %>/index.html'
},
html: {
options: {
transform: function (filePath) {
return '<script type="text/ng-template" src="' + filePath.replace('/src/', '') + '"></script>';
}
},
files: {
'<%= yeoman.app %>/index.html': [
'<%= yeoman.app %>/app/**/*.html'
]
}
},
scripts: {
options: {
transform: function (filePath) {
return '<script src="' + filePath.replace('/src/', '') + '"></script>';
}
},
files: {
'<%= yeoman.app %>/index.html': [
'<%= yeoman.app %>/app/**/*.module.js',
'<%= yeoman.app %>/app/**/*.js'
]
}
},
styles: {
options: {
transform: function (filePath) {
var media = filePath.indexOf('print') > -1 ? 'print' : 'screen';
return '<link rel="stylesheet" media="' + media + '" href="' + filePath.replace('/.tmp/', '') + '" />';
}
},
files: {
'<%= yeoman.app %>/index.html': [
'.tmp/styles/**/*.css'
]
}
}
},
然后在我的 index.html 中,我只是把 injector 评论像这样:
<!-- injector:css -->
<!-- endinjector -->
已转换为:
<!-- injector:css -->
<link rel="stylesheet" media="screen" href="styles/core.css" />
<link rel="stylesheet" media="print" href="styles/print.css" />
<!-- endinjector -->
就是这样。