gulp打包requirejs

目前我的项目是一个页面一个js入口，比如登录页面的入口是login.js，而主页面的入口是home.js，它们都是在同一个目录下。

├─ src/
├─ js/
├─ lib
├─ require.min.js
└─ jquery-1.11.1.min.js
├─ mod
├─ home.js
└─ login.js
└─ config.js
├─ gulpfile.js
└─ package.js

html每个页面的引入是这样子的：

<script type="text/javascript" src="__JSPATH__/config.js"></script>
<script type="text/javascript" src="__JSPATH__/lib/requirejs.min.js" data-main="__JSPATH__/mod/login.js"></script>

requirejs的config文件如下：

var requirejs = {
paths: {
jquery: '../lib/jquery-1.11.1.min',
widget: '../widget'
}
};

接下来就是使用gulp对js文件进行打包，用到的是「gulp-requirejs-optimize」，由于项目是多入口文件，所以需要批量打包，打包的代码如下：

var gulp = require('gulp');
var requirejsOptimize = require('gulp-requirejs-optimize');

gulp.task('rjs', function () {
return gulp.src('src/js/mod/*.js')
.pipe(requirejsOptimize({
mainConfigFile: 'src/js/config.js',
exclude: [
'jquery'
]
}))
.pipe(gulp.dest('dist/js/mod'));
});

运行相应命令，即可完成打包：

$ gulp rjs