gulp 合并requirejs 问题

项目使用了 requirejs 由于模块的独立带来了文件过多的问题,导致加载页面时会发起非常多的请求,影响了效率,因此考虑合并为一个文件。备选方案有 gulp+require-optimizegulp+amd-optimize 以及官方打包工具 r.js,最后选择方案二

实现方法

安装

npm install amd-optimize

gulpfile.js

...

var amdOptimize = require('amd-optimize'); //处理requirejs模块

...

gulp.task('js', function () {
    amdOptimize.src("js/app/home", {
            "paths": {
                "jquery": "assets/lib/jquery/jquery-1.11.3.min",
                "util": "assets/common/util",
                "constants": "js/common/constants",
                'hdb': 'assets/lib/handlebars/handlebars',
                "bootstrap": "assets/lib/bootstrap/bootstrap.min",
                "ztree-core": "assets/lib/ztree/js/jquery.ztree.core",
                "toast": "assets/lib/toastr/toastr.min",
            },
            baseUrl: "./"
        })
        .pipe(concat("index.js"))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/')) // 输出文件
        .pipe(rev.manifest()) // 生成一个rev-manifest.json
        .pipe(gulp.dest('./rev')); // 将 rev-manifest.json 保存到 rev 目录内
});

遇到的问题
  • 一开始使用的 require-optimize, 不太好用
  • 在配置 amd-optimize 的时候,开始使用的 gulp.src 导致了一些路径问题,
    还配置了 configFile 字段也不好用
  • 在使用 admOptimize.src 的时候,也经常出现某些依赖的某块找不到的问题,
    关键要在 paths 字段中指定这些依赖
  • amd-optimize 貌似并不会混淆压缩需要依赖 concat 插件和 uglify 插件

你可能感兴趣的:(gulp 合并requirejs 问题)