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