需要明確以下幾點：
1.本地前端調試程式碼肯定是呼叫原始的路徑以及程式碼，但是線上運行的肯定是透過打包後的另一個路徑，這兒就是生成的dist文件夾了。
2.requirejs的引入，線上跟線下的路徑怎麼控制？我們是這樣控制的，程式碼如下：
<script src="${resource}/js/base/require.js?1.1.11" data-main="${resource}/js/accountMain"></script>這個${resource}是服務端控制傳遞到頁面中的，在本地調試這個 ${resource}的值就是/resource/v1/;那麼到了線上這個值就是/dist/v1/了。所以這個js線上跟線下的配合就完成了。本地調試調用的是/resource/v1/下面的資源，在線上就是/dist/v1/下的資源，當然這個v1其實是多餘的，當時主要是為了做版本發布添加的版本號。
下面我們就一步一步來講解下如何把resource/v1/js/下的入口檔案都打包。
首先看一下我的所有入口檔案在哪裡，如圖所示：
#這些js就是在resource/v1/js/下面。 入口現在有11個js文件，都需要把所引入的模組都打包到各自的入口js中。
第一步，我copy原始資源中的fonts,images,css以及js中base下的js，其中base下的js檔案主要是基本的函式庫，包括requirejs函式庫等。複製到dist資料夾下。
###複製的作用是，在線上我也需要dist下的fonts,images,css。 ######copy: {/* main: {
expand: true,
cwd: 'src',
src: '**',
dest: 'dist/',
}, */ main:{
files:[
{expand: true,cwd: 'resources/v1/css/',src: '**',dest:'dist/v1/css/'},
{expand: true,cwd: 'resources/v1/fonts/',src: '**',dest:'dist/v1/fonts/'},
{expand: true,cwd: 'resources/v1/images/',src: '**',dest:'dist/v1/images/'},
{expand: true,cwd: 'resources/v1/js/base/',src: '**',dest:'dist/v1/js/base/'}
]
}
}// r.js 打包准备var files = grunt.file.expand('resources/v1/js/*.js');var requirejsOptions = {}; //用来存储 打包配置的对象//遍历文件files.forEach(function(file,index,array) {var name = file.substring(file.lastIndexOf('/') + 1);var reqname = name.replace(/\.js$/,'');
console.log(name);var filename = 'requirejs' + index;
requirejsOptions[filename] = {
options: {
baseUrl: "resources/v1/js",
paths:{"jquery":'base/jquery-1.11.3.min','vue':'base/vue.min',"vuedraggable":'base/vuedraggable','bootstrap':'base/bootstrap.min',"sortablejs":'base/Sortable',"basicLib":'widgets/basicLib','msg':'widgets/msg','baseUrl':'widgets/baseUrl','common':'widgets/common',"ajaxfileupload":'widgets/ajaxfileupload','document':'widgets/document',"comp":'widgets/comp','header':'module/header','accountCenter':'view/accountCenter','docking':'view/docking','templateUploadCtr':'view/templateUploadCtr'
},
shim:{'vue':{
exports:'vue' },'basicLib':['jquery'],'bootstrap':['jquery'],'ajaxfileupload':['jquery'],'sortablejs':['vue']
},
optimizeAllPluginResources: true,
name: reqname,
out: 'dist/v1/js/' + name
}
};
});grunt.initConfig({
requirejs: requirejsOptions
})
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']); module.exports = function(grunt) { // r.js 打包准备var files = grunt.file.expand('resources/v1/js/*.js');var requirejsOptions = {}; //用来存储 打包配置的对象//遍历文件files.forEach(function(file,index,array) {var name = file.substring(file.lastIndexOf('/') + 1);var reqname = name.replace(/\.js$/,'');
console.log(name);var filename = 'requirejs' + index;
requirejsOptions[filename] = {
options: {
baseUrl: "resources/v1/js",
paths:{"jquery":'base/jquery-1.11.3.min','vue':'base/vue.min',"vuedraggable":'base/vuedraggable','bootstrap':'base/bootstrap.min',"sortablejs":'base/Sortable',"basicLib":'widgets/basicLib','msg':'widgets/msg','baseUrl':'widgets/baseUrl','common':'widgets/common',"ajaxfileupload":'widgets/ajaxfileupload','document':'widgets/document',"comp":'widgets/comp','header':'module/header','accountCenter':'view/accountCenter','docking':'view/docking','templateUploadCtr':'view/templateUploadCtr'
},
shim:{'vue':{
exports:'vue' },'basicLib':['jquery'],'bootstrap':['jquery'],'ajaxfileupload':['jquery'],'sortablejs':['vue']
},
optimizeAllPluginResources: true,
name: reqname,
out: 'dist/v1/js/' + name
}
};
}); //配置参数 grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
requirejs:requirejsOptions,
watch: {
js: {
files:['resources/**/*.js'],
tasks:['default'],
options: {livereload:false}
},
babel:{
files:'resources/**/*.js',
tasks:['babel']
}
},
jshint:{
build:['resources/**/*.js'],
options:{
jshintrc:'.jshintrc' //检测JS代码错误 }
},
copy: {/* main: {
expand: true,
cwd: 'src',
src: '**',
dest: 'dist/',
}, */ main:{
files:[
{expand: true,cwd: 'resources/v1/css/',src: '**',dest:'dist/v1/css/'},
{expand: true,cwd: 'resources/v1/fonts/',src: '**',dest:'dist/v1/fonts/'},
{expand: true,cwd: 'resources/v1/images/',src: '**',dest:'dist/v1/images/'},
{expand: true,cwd: 'resources/v1/js/base/',src: '**',dest:'dist/v1/js/base/'}
]
}
},
babel: {
options: {
sourceMap: false,
presets: ['babel-preset-es2015']
},
dist: {
files: [{
expand:true,
cwd:'dist/v1/js/', //js目录下 src:['*.js'], //所有js文件 dest:'dist/v1/js/' //输出到此目录下 }]
}
},
uglify: {
options: {
mangle: true, //混淆变量名comments: 'false' //false（删除全部注释），some（保留@preserve @license @cc_on等注释） },
my_target: {
files: [{
expand:true,
cwd:'dist/v1/js/', //js目录下 src:['*.js'], //所有js文件 dest:'dist/v1/js/' //输出到此目录下 }]
}
}
});
//载入uglify插件，压缩js grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-babel'); //grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-watch');
//注册任务 grunt.registerTask('default', ['copy','requirejs','babel','uglify']);
grunt.registerTask('watcher',['watch']);
}以上是多入口js檔案打包的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
