最近，在做项目优化，想将用到的jquery.js、bootstrap.js、angular.js、angular-ui-router.js、validator.js以及require.js做all in one（统一合并为一个文件），已减少http的请求数量。然而，在合并的过程中，报错：
Uncaught Error: Mismatched anonymous define() module: function (validator)
目录结构：
'use strict';
module.exports = function(grunt) {
var fs = require('fs');
// 构建的初始化配置
grunt.initConfig({
webapp: {'path': __dirname},
//配置具体任务
/* 合并文件 */
concat: {
js_build: {
files: [{
src: [
'/server/lib/jquery.js',
'/server/lib/bootstrap.js',
'/server/lib/angular.js',
'/server/lib/angular-ui-router.js',
'/server/lib/require.js',
'/server/lib/validator.js'
],
dest: '/server/lib/lib.js'
}]
}
},
/* 替换占位 */
replace: {
js_replace: {
src: [
'/server/*.html' ],
overwrite: true,
replacements: [
{
from: '',
to: ''
}
]
}
},
/* 替换 */
htmlbuild: {
js_config: {
options: {
beautify: true,
prefix: '/',
scripts: {
'lib': '/server/lib/lib*.js'
}
},
src: [
'/server/*.html'
],
dest: '/server/'
}
}
});
// 载入要使用的插件
grunt.loadNpmTasks('grunt-contrib-concat'); //https://github.com/gruntjs/grunt-contrib-concat
grunt.loadNpmTasks('grunt-text-replace'); //https://www.npmjs.com/package/grunt-text-replace
grunt.loadNpmTasks('grunt-html-build'); //https://github.com/spatools/grunt-html-build
// 注册刚配置好的任务
grunt.registerTask('replace-build-lib-js', ['concat:js_build', 'replace:js_replace', 'htmlbuild:js_config']);
/**
* use: grunt dev
*/
grunt.registerTask('dev', '项目develop调试部署', function(language, arg2) {
console.log('启动开发者模式调试部署');
grunt.task.run([
// 生成lib.js
'replace-build-lib-js'
]);
});
}
原因：
validator.js中使用了define，然而requirejs中定义了define，define被重写，导致报错。
所以将requirejs放到最后合并到文件中就可以了。
concat: {
js_build: {
files: [{
src: [
'/server/lib/jquery.js',
'/server/lib/bootstrap.js',
'/server/lib/angular.js',
'/server/lib/angular-ui-router.js',
'/server/lib/validator.js',
'/server/lib/require.js'
],
dest: '/server/lib/lib.js'
}]
}
},
说明，上述replace:js_replace目的是：使用htmlbuild时，存在多个标记会互相影响，所以这里采用动态生成标记，先使用占位，然后通过replace命令动态替换为htmlbuild占位符
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net
