Javascript Grunt usemin和usemin准备多个目标
从中可以看出,Javascript Grunt usemin和usemin准备多个目标,javascript,node.js,gruntjs,npm,grunt-usemin,Javascript,Node.js,Gruntjs,Npm,Grunt Usemin,从中可以看出,usemin和useminPrepare在最新版本中支持多个目标: 在useminPrepare中支持多个目标: usemin支持: 我已尝试使用具有以下配置的多个目标: useminPrepare: { foo: { dest: 'fooDist', src: ['foo/index.html'] }, bar: { dest: 'barDist', src: ['bar/i
usemin
和useminPrepare
在最新版本中支持多个目标:
在useminPrepare中支持多个目标:
useminPrepare: {
foo: {
dest: 'fooDist',
src: ['foo/index.html']
},
bar: {
dest: 'barDist',
src: ['bar/index.html']
}
},
usemin: {
foo: {
options: {
assetsDirs : ['fooDist']
},
html: ['fooDist/**/*.html'],
css: ['fooDist/styles/**/*.css']
},
bar: {
options: {
assetsDirs : ['barDist']
},
html: ['barDist/**/*.html'],
css: ['barDist/styles/**/*.css']
}
},
但我收到以下错误:
正在运行“usemin:foo”(usemin)任务警告:不支持的模式:foo
使用--force继续
使用grunt usemin 2.0.2
foo/index.html
和bar/index.html
是两个单页应用程序的主要页面
谢谢你的帮助 您是否需要两个项目都位于同一个存储库和同一个Gruntfile下 你自己说过它们是“2个单页应用程序的主页”。如果你能负担得起把它分成两个不同的项目,你可能会省去一些痛苦 或者,您可以将这两个索引分组到一个公共目录下。这就是我如何将grunt usemin与两个不同的索引文件一起使用:
useminPrepare:
html: ['build/<%= relativePath %>/index.html', 'build/<%= relativePath %>/orderPlaced/index.html']
options:
dest: 'build/'
root: 'build/'
usemin:
html: ['build/<%= relativePath %>/index.html', 'build/<%= relativePath %>/orderPlaced/index.html']
useminPrepare:
html:['build//index.html','build//orderplacted/index.html']
选项:
dest:'build/'
root:'build/'
usemin:
html:['build//index.html','build//orderplacted/index.html']
不确定这是否有帮助,但我成功地完成了您尝试的Grunt Contrib Min和Grunt Contr的组合
'use strict';
module.exports = function(grunt) {
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
main: {
options: {
encoding: 'UTF-16'
},
files:[
{
expand: 'true',
flatten: 'true',
src: 'src/audio/*',
dest: 'bin/pro/audio/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/fonts/*',
dest: 'bin/pro/fonts/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/adaptors/*.html',
dest: 'bin/pro/adaptors/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/lib/*',
dest: 'bin/pro/lib/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/img/*',
dest: 'bin/pro/img/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/manifest.json',
dest: 'bin/pro/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/audio/*',
dest: 'bin/lite/audio/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/fonts/*',
dest: 'bin/lite/fonts/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/adaptors/*.html',
dest: 'bin/lite/adaptors/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/lib/*',
dest: 'bin/lite/lib/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/img-lite/*',
dest: 'bin/lite/img/'
},
{
expand: 'true',
flatten: 'true',
src: 'src/lite/manifest.json',
dest: 'bin/lite/'
}
]
},
},
uglify: {
all: {
files: {
'bin/pro/js/cupid.min.js': ['src/popup.js','src/cupid.js','src/adaptors/*.js'],
'bin/pro/background.js': ['src/background.js'],
'bin/lite/js/cupid.min.js': ['src/popup.js','src/cupid.js','src/adaptors/*.js'],
'bin/lite/background.js': ['src/background.js'],
'bin/lite/lite.js': ['src/lite.js'],
'bin/pro/pro.js': ['src/pro.js'],
},
options: {
compress: false,
mangle:false
}
}
},
targethtml: {
dist: {
files: {
'bin/pro/popup.html': 'src/popup.html'
}
},
lite: {
files: {
'bin/lite/popup.html': 'src/popup.html'
}
},
},
cssmin: {
all: {
files: {
'bin/pro/cupid.min.css': ['src/*.css'],
'bin/lite/cupid.min.css': ['src/*.css'],
},
options: {
compress: true,
mangle:true
}
}
},
});
//Default task(s).
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-targethtml');
grunt.registerTask('default', ['uglify','cssmin','copy','targethtml']);
};
此Grunt文件将获取我的应用程序目录,将其全部输出到PRO文件夹,并添加一些特殊标记,还将所有内容再次输出到Lite文件夹,并设置其他开关。尽管当前usemin不支持多个目标,但它们确实允许您定义新模式 因此,在此期间,您可以使用以下方法定义新目标:
usemin: {
html: ['index.html'],
css: ['styles/{,*/}*.css'],
options: {
assetsDirs: ['src'],
patterns: {
templates: [[ /<img[^\>]+src=['"]([^"']+)["']/gm,
'Update the templates with the new img filenames'
]]
}
},
templates: "scripts/**/*.tpl.html"
}
usemin:{
html:['index.html'],
css:['style/{,*/}*.css'],
选项:{
资产目录:['src'],
模式:{
模板:[[/默认情况下,usemin尝试从目标名称中检测解析器类型(html,css)。当您使用的目标名称不是有效的解析器类型时,您应该使用type选项手动指定解析器类型。这将导致每个dest有两个目标,一个用于html,一个用于css
usemin:{
'foo-html':
{
options:
{
assetsDirs : ['fooDist'],
type:'html'
},
files: {src: ['fooDist/**/*.html']}
},
'foo-css':
{
options:
{
assetsDirs : ['fooDist'],
type:'css'
},
files: {src: ['fooDist/styles/**/*.css']}
},
'bar-html':
{
options:
{
assetsDirs : ['barDist'],
type:'html'
},
files: {src: ['barDist/**/*.html']}
},
'bar-css':
{
options:
{
assetsDirs : ['barDist'],
type:'css'
},
files: {src: ['barDist/styles/**/*.css']}
}
}
作为一种解决方法(为此挣扎了一段时间),我们决定运行整个grunt作业两次,并添加了一个grunt选项,该选项将目标文件切换为不同的值。这并不优雅,但很简单。我试图做一些类似的事情,我有多个页面/模板,其中包含不同的依赖css/js/img文件,我希望通过usemin单独处理这些文件。您可以使用一个js并使用多任务来完成多个目标和目标。这将是您的GrunFile:
var packageConfig = [];
var gruntConfig = {};
gruntConfig.useminPrepareMulti = {};
gruntConfig.useminPrepare = {};
gruntConfig.usemin = {
html: [],
css: [],
options: {
assetDirs: []
}
};
var projectDirs = ['foo', 'bar'];
var src, dist;
projectDirs.forEach(function(dir) {
src = path1 + dir;
dist= path2 + dir;
gruntConfig.useminPrepareMulti[dir] = {
html: src + '*.html',
options: {
dest: dist,
staging: '.tmp' + dir,
flow: { html: { steps : { js : ['concat'] } } },
post: {}
}
};
packageConfig.push(src);
gruntConfig.usemin.html.push(dist + '*.html');
gruntConfig.usemin.css.push(dist + '/styles/*.css');
gruntConfig.usemin.options.assetsDirs.push( dist, dist + '/styles');
});
grunt.initConfig(gruntConfig);
grunt.registerMultiTask('useminPrepareMulti', 'multi-target-usemin', function() {
grunt.config.set('useminPrepare', this.data);
grunt.task.run('useminPrepare');
});
注册任务后,您可以通过以下方式运行所有不同的目标/目标配置:
grunt.registerTask('default', ['useminPrepareMulti']);
或者从您创建的packageConfig中分别运行它们:
grunt.registerTask('single', ['useminPrepareMulti:' + packageConfig[0]]);
我还必须修改html代码中的usemin块,以包含相对于根的路径,例如:
<!-- build:js(./assets/dir/foo) scripts/vendor.js -->
<script src="scripts/file.js"></script>
<!-- endbuild -->
你解决过这个问题吗?@SeanAnderson:我最终使用了2个grunt配置文件作为临时解决方案。正如@sorich87在这里的线程末尾所指出的()多个目标被支持但不是多个目的地。看看乘法<代码>类型:“JS’< /COD>?@ USE1828 780,也考虑通过JS直接引用资产是一个坏的实践,有时不可能执行所有引用而不执行JS代码。最好通过保持关注的分离来避免这一点,保持BEH。js中的avior和css中的表示以及html中的语义,js可以通过css类和数据属性来操作这些层。当将其与filerev一起使用时,usemin不会将构建的js文件替换为修改后的文件名。有人知道任何解决方案吗?这是我期望的工作方式,我尝试以这种方式使用它,但是在同一目录中有两个索引文件。但由于某些原因,它不能按预期工作,并且useminPrepare没有为每个html文件生成组合的js文件。不知道如何调试它。请参考您正在使用的usemin版本。