gulp-cmd-pack
seajs的cmd模块合并打包工具
安装
npm install gulp-cmd-pack
使用
var gulp = require('gulp');
var cmdPack = require('gulp-cmd-pack');
var uglify = require('gulp-uglify');
gulp.task('cmd', function () {
gulp.src('path/to/module/app.js')
.pipe(cmdPack({
mainId: 'app',
base: 'path/to/module/',
alias: {
dialog: '../bower_components/dialog/dialog.js',
jquery: '../bower_components/jquery/dist/jquery.min.js'
},
ignore: ['bootstrap']
}))
.pipe(uglify({
mangle: {
except: ['require']
}
}))
.pipe(gulp.dest('path/dist/'));
});
模块依赖解析及合并规则
Module path/module/a.js
:
var b = require( './b' );
module.exports = 'a' + ' ' + b;
define(function(require , exports , module){
var b = require( './b' );
return 'a' + ' ' + b;
});
Module path/module/b.js
:
module.exports = 'b';
define(function(require){
return 'b';
});
Gulp:
var cmdPack = require('gulp-cmd-wrap');
gulp.src( 'path/module/a.js' )
.pipe( cmdPack({
mainId : 'a',
base : 'path/module'
}))
.pipe(gulp.dest('path/dist/'));
Results path/dist/a.js
:
define('a',['b.js'],function(require , exports , module){
var b = require( 'b.js' );
return 'a' + ' ' + b;
});
define('b.js' , [] ,function(require , exports , module){
return 'b';
});
Use
seajs.config({
base : 'path/dist/'
});
seajs.use('a');
Option 参数说明
-
option.alias
模块别名
作用和 seajs.config({alias : {}})
一样,使工具可以识别 alias
别名配置的路径
-
option.ignore
忽略模块列表
写在此数组内的模块不会被打包(但是会保留require引用)
Module path/module/a.js
:
var $ = require('jquery');
var b = require('./b');
$('button').text('hello button !! ' + b);
Module path/module/b.js
:
Gulp :
var cmdPack = require('gulp-cmd-wrap');
gulp.src( 'path/module/a.js' )
.pipe( cmdPack({
mainId : 'a',
base : 'path/module',
ignore : ['jquery']
}))
.pipe(gulp.dest('path/dist/'));
Results path/dist/a.js
:
define('a' , ['./b.js'] , function(require , exports , module){
var $ = require('jquery');
var b = require('./b.js');
$('button').text('hello button !! ' + b);
});
define('./b.js' , [] , function(require , exports , module){
module.exports = 'b';
});
-
option.encoding
编码
文件编码,默认 UTF-8
-
option.tmpExtNames
模板后缀名
模板文件支持,默认值为 ['.ejs']
,吧字符串模板转换为标准模块:
Module path/module/test.js
:
var testStr = require('../tmp/test.ejs');
var str = _.template(testStr , {data : {name : 'aa'}});
Template path/tmp/test.ejs
:
<div><%= data.name %></div>
Gulp :
var cmdPack = require('gulp-cmd-wrap');
gulp.src( 'path/module/test.js' )
.pipe( cmdPack({
mainId : 'test',
base : 'path/module',
tmpExtNames : ['.ejs']
}))
.pipe(gulp.dest('path/dist/'));
Results path/dist/test.js
:
define('test' , ['../tmp/test.ejs'] , function(require , exports , module){
var testStr = require('../tmp/test.ejs');
var str = _.template(testStr , {name : 'aa'});
});
define('../tmp/test.ejs' , [] , function(require , exports , module){
return '<div><%= data.name %></div>'
});