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

背景

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

define([
  'jquery',
  'backbone',
  'webuploader'
], function($, Backbone, WebUploader) {

  "use strict";

  ISPORT.views = ISPORT.views || {};

  ISPORT.views.WidgetUploadMulti =  Backbone.View.extend({

    events: {
      'click [data-action="upload"]': '_eBackUpload'
    },

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

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

工具

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

文件结构

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

test 代码如下：

require(["require-config"], function () {
    require([
        'apps/desk/collect/index',
        'apps/desk/detail/detail',
        'apps/desk/list/list',
        'apps/desk/profile/index'
    ]);
})

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({
    baseUrl: "/static/js",
        paths: {
            "common": "apps/common",
            "jquery": "libs/jquery/jquery-1.11.1.min",
            "jq-plugin": "libs/jqueryplugin",
            "modernizr": "libs/modernizr/min",
            "fd": "libs/foundation",
            "fdmini": "libs/foundation/foundation.min",
            "webuploader": "libs/webuploader/webuploader.min",
            "simple-module": "libs/simditor/module",
            "simple-hotkeys": "libs/simditor/hotkeys",
            "simple-uploader": "libs/simditor/uploader",
            "simditor": "libs/simditor/simditor",
            "zepto": "bowerjs/zepto/zepto",
            "backbone": "bowerjs/backbone/backbone",
            "underscore": "bowerjs/underscore/underscore-min",
            "template": "template/build"
          },

        shime: {
            "fdmini": {
                deps: ['jquery']
            }
        }
});

发现打包后的文件中包含了 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 中查看结果

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

后记

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