javascript - requirejs,r.js,gulp

Question

用requirejs模块化开发，想把js合并下，用 的r.js，项目用gulp构建的，感觉操作起来有点儿复杂，需要先用r.js打包，然后再gulp构建项目，试了下amd-optimize，没有成功，想各位大神指引一下

Answer 1

正好我也在这么用require,也是四处搜罗测试，可能面临如下几个问题：
1、加载：requirejs一次性加载了所有的js文件（说好的按需加载呢？）
2、缓存：怎么给文件加md5或hash防止缓存
3、合并：可能一次要加载N个模块js文件，这不合理啊，所以想要压缩（分类压缩成好几个文件）
4、构建：用gulp自动给压缩合并后的js文件加上md5防止缓存
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
鉴于以上，我也在摸索阶段，望有高手多多赐教。

1、关于加载多问题， https://segmentfault.com/q/1010000003408775
经我测试：

    //app.js
    // 
    require(['component/ab'], function(ab) {
        ab.b();  //这里调用ab里的b函数
        //ab.a(); 
        // 
    });

以上并未调用 a 函数 在实际加载页面中 d.js 也被加载了，同时 d 所依赖的 a 也同时加载进来了，
我们所期望的是，只有被调用的时候才加载，并未实现……

//ab.js
define(function(require) {
    return {
        a: function() {
            var d = require('component/d');
            d.d()
            console.log("ab.a()");
        },
        b: function() {
            var b = require('component/b');
            b.b();
            console.log("ab.b()");
        }
    }
});

//d.js
define(function(require) {
    return {
        d: function() {
            var a = require('component/a');
            a.a();
        }
    };
});

//a.js
define(function() {
    return {
        a: function() {
            console.log("aaaaaaaaaaaaa");
        }
    };
});

－－－－－－－－－－－－－－－－－－－分割线－－－－－－－－－－－－－－－－－－－－

2、关于用gulp给文件加md5防止缓存的方法
需要 "gulp-rev","gulp-rev-collector",这个两个文件配合即可

3、文件合并
requie有 r.js 文件来合并，也可以区分多个文件及排除不合并的文件
如果用gulp 就用 amd-optimize

示例代码

// 合并js
gulp.task('rjs', function() {
    return gulp.src('src/js/**/*.js')
        .pipe(amdOptimize("./src/js/app", {
            //require config
            paths: {
                'jquery': 'src/js/lib/jquery',
                'laydate': 'src/js/lib/laydate',
            },
            // 第三方
            shim: {
                'laydate': {
                    deps: [],
                    exports: 'laydate'
                }
            }
        }))
        .pipe($.concat("app.js")) //合并
        .pipe(gulp.dest("app/dist")) //输出保存
        .pipe($.rename("app.min.js")) //重命名
        .pipe($.uglify()) //压缩
        .pipe(gulp.dest("app/dist")) //输出保存
});

重要的是自己做个小demo实践一下。就会明白。