开始接手项目的时候,公司用的框架(kendoui,有兴趣的同学可以去看一下,这是收费的而且国内的资料很少)包含了所有的模块,未压缩的时候是8M,压缩完了是3.5M,我的主管和我说能不能拆分一下,当时我想也没想就说可以啊这还不简单。(给自己挖了个坑)源代码有20多万行,我是一行一行的看,主要是找出模块之间的依赖关系。然后看了两天半,我就拆出来了,然后发现合不起来了!!!!!!!(气死我了当时,dota都没好好打)。没办法只能Google吧。一顿操作猛如虎,发现可用的知识不是很多啊。大部分说让用r.js,但是不想啊,因为框架给了一个gulpFile文件,虽然我很多代码看不懂,但是我知道能用gulp打包合起来。
这个时候可能有同学说了为什么不用webpack,我以前配置的都是cmd模块啊,amd模块没配置过,不敢贸然使用,怕浪费时间拖了工期啊。 接下来说一下网上的,有amd-optimize,然后大兄弟写了shell,但我运行报错了,发现现在使用的是gulp-exec,发现还是不行,果断放弃,这时候又发现一个gulp-requirejs-optimize。简直开心的要飞起来了。发现老是把一些没有的打进来,就又查了一下发现!['form/kendoui/xx.js','form/kendoui/xx.js']
就可以了。
let gulp = require('gulp');
let concat = require('gulp-concat');
let uglify = require('gulp-uglify');
let amdOptimize = require('amd-optimize');
let reqOptimize = require('gulp-requirejs-optimize');
let shell = require('gulp-shell');
let babel = require('gulp-babel')
gulp.task('jsTask',async function(){
return gulp.src('form/kendoui/main.js',!['])
.pipe(reqOptimize({
paths:{
},
exclude:[
'jquery'
],
// mainConfigFile:'form/kendoui/main.js',
optimize:'none',
fileExclusionRegExp: /^()+\.js$/,
skipModuleInsertion: true
}))
.pipe(concat(''))
.pipe(gulp.dest('./dist/js'))
});
复制代码
`
我把整体的结构贴出来,有需要的同学可以看一下。