用 gulp 构建一个项目，requireJS 搞砸了答案

【问题标题】：Build a project with gulp and requireJS mess up用 gulp 构建一个项目，requireJS 搞砸了
【发布时间】：2016-01-17 23:55:17
【问题描述】：

我拼命尝试使用 gulp 和 requireJS 编译一个项目。该项目在开发环境中使用 AMD 模块和 requireJS 运行良好。我尝试相对于 topic 使用 requireJS 优化器（第三个答案）我只有

requirejs task failed {"originalError":{}}

你可以找到我的项目here

这是一个无需浏览项目即可提供帮助的屏幕

project

使用devDoc生成项目js文件依赖

编辑：

这里是代码

gulpfile.js

(function () {
'use strict';

var gulp            = require('gulp'),
    bower           = require('gulp-bower'),
    requirejs       = require('requirejs'),
    requirejsConfig = {
        baseUrl       : './lib',
        name          : 'index',
        // optimizeCss   : "none",
        optimize      : "uglify",
        // removeCombined: true,
        // wrap          : true,
        mainConfigFile: './app/main.js',
        out           : './dist/app.js'
    };

// fail with "requirejs task failed {"originalError":{}}"
gulp.task('requirejs', function (taskReady) {
    requirejs.optimize(requirejsConfig, function () {
        taskReady();
    }, function (error) {
        console.error('requirejs task failed', JSON.stringify(error));
        process.exit(1);
    });
});

gulp.task('bower', function() {
  return bower({cmd: 'update'})
    .pipe(gulp.dest('lib/vendor'));
});

gulp.task('default', ['bower']);
}());

main.js

require(
['jquery', 'message', 'forms', 'websocket', 'user', 'chat', 'bootstrap'],
function ($, Message, FormsManager, WebsocketManager, User, ChatManager) {
    'use strict';

    var message   = new Message(),
        forms     = new FormsManager(message),
        user      = new User(message, forms),
        websocket = new WebsocketManager(message, user),
        chat      = new ChatManager(message, websocket, user, forms);

    // Bind WebSocket server callbacks
    websocket.addCallback(message.settings.serviceName, message.parseWebsocketData, message);

    // Make it global to develop
    window.WebsocketManager = websocket;
    window.ChatManager      = chat;
}
);

【问题讨论】：

您可能希望将相关的代码部分添加到问题中。大多数查看此内容的人不太可能会下载并构建您的代码。
嗯，展示js树有点难。好的，我会截图让我们试试这个。
复制/粘贴是你的朋友。理想情况下，您知道有问题的代码部分，而不是问题所在。也许关于gulp 和requireJS 的部分会是一个好的开始。
我拍的屏幕应该比 3 或 4 次复制粘贴更有帮助。不幸的是，我没有足够的“声誉”来直接在帖子主题中包含图片。
人们无法从屏幕截图中复制/粘贴来编辑您的代码，所以说真的，我们更喜欢代码。更多代码只要是相关的就永远不是问题。

标签： javascript build compilation requirejs gulp

【解决方案1】：

我使用这些配置文件成功构建了项目

app.js

requirejs.config({
"paths": {
    "bootstrap"       : "lib/vendor/bootstrap",
    "bootstrap-select": "lib/vendor/bootstrap-select",
    "bootstrap-switch": "lib/vendor/bootstrap-switch",
    "domReady"        : "lib/vendor/domReady",
    "jquery"          : "lib/vendor/jquery",
    "lodash"          : "lib/vendor/lodash",
    "require"         : "lib/vendor/require",
    "chat"            : "lib/chat",
    "forms"           : "lib/forms",
    "message"         : "lib/message",
    "user"            : "lib/user",
    "websocket"       : "lib/websocket"
},
"shim" : {
    "bootstrap" : {
        "deps": ['jquery']
    },
    "bootstrap-select" : {
        "deps": ['bootstrap']
    },
    "bootstrap-switch" : {
        "deps": ['bootstrap']
    }
}
// ...
});

requirejs(['main']);

app.build.js

({
name: "app.js",
mainConfigFile: 'app.js',
out: "../dist/app.js",
optimize: "uglify2",
preserveLicenseComments: false,
generateSourceMaps: true,
optimizeAllPluginResources: true, // usefull ?
findNestedDependencies: true,
wrap: true,
include: ["lib/vendor/require.js"]
})

gulpfile.js

(function () {
'use strict';

var gulp            = require('gulp'),
    bower           = require('gulp-bower'),
    mainBowerFiles  = require('main-bower-files'),
    del             = require('del'),
    shell           = require('gulp-shell');

gulp.task('build', shell.task('node ./node_modules/requirejs/bin/r.js -o app.build.js'));


gulp.task('bower_install', function () {
    return bower();
});

gulp.task('bower_move', ['bower_install'], function () {
    return gulp.src(mainBowerFiles()).pipe(gulp.dest('lib/vendor'));
});

gulp.task('bower_clean', ['bower_move'], function () {
    del(['lib/vendor/*', '!lib/vendor/*.js']);
});

gulp.task('default', ['bower_install', 'bower_move', 'bower_clean']);
}());

这是一项艰巨的任务，使用 gulp 自动化这项任务也有点困难也许我只是一个菜鸟，但构建这个项目非常困难。我希望它能帮助人们节省宝贵的时间。

【讨论】：