首页 > 代码库 > CMD模块打包部署总结

CMD模块打包部署总结

目前线上系统利用Seajs做模板化,但是没有对js和css进行打包,在这次简历搜索优化项目里我尝试对gulp插件对Seajs模块打包。

安装gulp和相关插件

npm install -g gulp
npm install —-save-dev gulp

cmd打包的插件:gulp-cmd

gulp-cmd可以解析seajs.config中的alias,vars,paths 只有在有seajs.use的时候才有用

npm install --save-dev gulp-cmd

css压缩插件gulp-clean-css ,这个插件代替之前一直使用的gulp-minify-css

npm install --save-dev gulp-clean-css

js压缩合并插件

npm install --save-dev gulp-uglify gulp-concat

入口文件配置

gulp-cmd支持seajs的配置文件,入口文件可以这样配置:

seajs.config({
// 基础路径
// base: window.seajsBase,
// 路径配置
paths: {
js: ../js,
css: ../css,
dist : ./dist
},
// 别名配置
alias: {
jquery: js/jquery,
index: js/index,
citys-pc:js/citys-pc,
citys:js/citys,
industry:js/industry,
jobs:js/jobs,
bigcity:js/bigcitys,
js/selector:js/selector-v1
},
// 文件编码
charset: utf-8
})
seajs.use("./js/search-v1")

在解析模块过程中先解析alias,然后在匹配paths

Js处理流程

gulp.task(search-js, function () {
 
return gulp.src(js/search-main.js)
.pipe(cmd({
ignore: [jquery]
}))
.pipe(uglify()) //压缩
.pipe(gulp.dest(build/js)); //输出
 
});

ignore配置忽略jquery组件,把jquery组件和业务组件分离开。

打包后的文件格式如下:

技术分享

define函数的第一个参数是该模块的模块id

css处理流程

gulp.task(search-css, function () {
 
return gulp.src([
css/main.css,
css/selector.css,
css/search-v1.css,
])
.pipe(minifycss({ compatibility: ie7 }))//兼容ie7的配置
.pipe(concat(search-main.css))
.pipe(gulp.dest(build/css/));
 
});

注意:如果css有兼容ie7的hack代码,如果去除compatibility配置,压缩过程会剔除这些hack代码。

js的引用链接

如果没有其他模块,使用一下的引用方式,不过版本号的问题还是要手动改Velocity模板,版本号的问题要等一会前端接管模板以后的构建流程来做了

<script src=http://www.mamicode.com/"js/sea.js"></script>
<script src=http://www.mamicode.com/"build/js/jquery.js"></script>
<script src=http://www.mamicode.com/"build/js/search-main.js?v=20160803"></script>

目前的引用方式,因为页脚里seajs.use加载了其他模块,引用方式要改下,还需要引入seajs.config.js文件,比较奇怪的是,即使已经定义的模块,seajs.use也会重复去加载,比如jquery,之前如果定义过,模块id是jquery,下面的seajs.use还是会请求加载一次jquery模块。

<script src=http://www.mamicode.com/"http://st01.chrstatic.com/themes/bchinahr/js/sea.js"></script>
<script src=http://www.mamicode.com/"http://st01.chrstatic.com/themes/bchinahr/js/sea-config.js?v=20160803"></script>
<script src=http://www.mamicode.com/"http://st01.chrstatic.com/themes/bchinahr/build/js/search-main.js?v=20160803"></script>
<script>
seajs.use("http://st01.chrstatic.com/themes/bchinahr/js/hf",function(hf) {
hf.hObj.init();
})
</script>

css的压缩合并后大小有40k,js有69k,css和js的请求数减少了50%以上,

 

CMD模块打包部署总结