CODEWITHSUNDEEP
javascriptbuildcompilationrequirejsgulp
Romain Laneuville
Romain Laneuville

Reputation: 497

Build a project with gulp and requireJS mess up

I desperately tried to compile a project using gulp and requireJS. The project run nicely with AMD modules and requireJS in development environment. I tried to use the requireJS optimizer relatively to this topic (3rd answer) All i had is 

requirejs task failed {"originalError":{}}

You can find my project here

Here is a screen that can help without browsing the project

project

Use the devDoc to generate project js files dependencies

EDIT:

here are the codes

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;
}
);

Upvotes: 3

Views: 892

Answers (1)

Romain Laneuville
Romain Laneuville

Reputation: 497

I built the project with success using those configuration files

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']);
}());

It was such an hard task, and automatize this task using gulp was kinda hard too Maybe I'm just a noob but building this project was very difficult. I hope it will help someone to save precious hours.

Upvotes: 2

Related Questions