前端 | gulp 打包 require.js 模块依赖

背景

项目JS脚本是使用 require.js 来组织

在依赖没有打包之前，加载是这样

请求太多，一个有洁癖的人肯定是受不了的，故需求就产生了，打包 require.js 模块代码依赖

工具

我使用 gulp 作为前端任务管理器，使用 amd-optimize 来打包require.js 模块依赖 有人说此插件下载量太低，不敢用，我也就呵呵了，工具是用来解决问题的，不是给人看的,实在不行，查看源代码自己造个轮子也不错

文件结构

我是用上图中的 test.js 作为打包入口文件

test 代码如下：

require(["require-config"], function() {
    require([
        'xxxxxxx1',
        'xxxxxxx2',
        'xxxxxxx3',
        'xxxxxxx4',
    ]);
});

gulp 任务函数

var concatFile = require('gulp-concat')
  , uglifyJS = require('gulp-uglify')
  , shell = require('gulp-shell')
  , amdOptimize = require('amd-optimize');

gulp.task('bundle', function () {
  return gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS('test.js'))
    .pipe(gulp.dest('./jsbuild/'));
});

运行任务之后，文件已经打包指定目录
注意： 任务函数中我没有压缩，用意等下解释

问题

• debug 环境下加载了 require-config.js
• production 环境使用的是打包后的模块文件，即 ./jsbuild 中的 test.js 没有加载 require-config.js,至于原因：因为模块依赖已经打包到一个文件中，已经没有必要加载 require-config.js

但是生产环境测试发现：

发现还是有很多请求发生，也就是说打包没有起到作用

查看生成的 ./jsbuild/test.js 文件，直接查看最后几行代码 就会发现

发现打包后的文件中包含了 require-config.js 的内容，在插件的配置选项中没有发现去除包含 require.js 配置文件的选项 【如果你发现了，请分享下，万分感谢】

不得已采用 shell 处理，修改后的任务函数如下

gulp.task('isport:desk', function() {
  gulp.src('./js/**/*.js')
    .pipe(amdOptimize('test', {
      configFile: './js/require-config.js',
      findNestedDependencies: true,
      include: false
    }))
    .pipe(concatFile('test.js'))
    // .pipe(uglifyJS())
    .pipe(gulp.dest('./jsbuild/'))
    .pipe(shell([
      "sed '/require.config({/, $d' ./jsbuild/test.js > ./jsbuild/test-mini.js",
      "rm ./jsbuild/test.js"]));

  return gulp.src('./jsbuild/test-mini.js')
    .pipe(uglifyJS())
    .pipe(gulp.dest('./jsmini'));
}); 

运行任务后，在debug tools 中查看结果

通过发现，干净了，心情舒畅了

后记

实话说这种方法打包并不是很完美，至于完美的方法一直在不断的探索中