用gulp构建一个项目，需要JS搞砸

Build a project with gulp and requireJS mess up

本文关键字：项目 需要 JS 搞砸 一个 构建 gulp      更新时间：2023-09-26

我拼命地尝试使用gulp和requireJS编译一个项目。该项目在AMD模块上运行良好，并且在开发环境中需要JS。相对于这个主题，我尝试使用 requireJS 优化器（第三个答案）我所拥有的只是 

requirejs task failed {"originalError":{}}

你可以在这里找到我的项目

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

项目

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

编辑：

这是代码

古尔普文件.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']);
}());

主.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

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"]
})

古尔普文件.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 自动执行此任务也有点困难 也许我只是一个菜鸟，但构建这个项目非常困难。我希望它能帮助某人节省宝贵的时间。

相关文章：