CODEWITHSUNDEEP
requirejsgulp
Rajeev
Rajeev

Reputation: 1113

requirejs optimization with gulp

I am using requirejs and gulp to build angular app. I am using amd-optimize and gulp-requirejs-optimize to add all js files into single file. Here is my main.js file: 

require.config(
    {
        paths: {
            app             : 'app',
            angular         : '../bower_components/angular/angular',
            jquery          : '../bower_components/jquery/dist/jquery',
            angularResource : '../bower_components/angular-resource/angular-resource',
            angularRoute    : '../bower_components/angular-route/angular-route',
            publicModule    : 'public_module',
            route           : 'route'
        },
        shim: {
            'app': {
                deps: ['angular']
            },
            'angularRoute': ['angular'],
            angular : {exports : 'angular'}
        }
    }
);

And gulpfile.js

var gulp    = require('gulp');
var rjs     = require('gulp-requirejs');
var connect = require('gulp-connect');
var requirejsOptimize = require('gulp-requirejs-optimize');
var amdOptimize = require('amd-optimize');
var concat = require('gulp-concat');

// using amd-optimize.
gulp.task('bundle', function () {
    return gulp.src('app/**/*.js')
        .pipe(amdOptimize('main'))
        .pipe(concat('main-bundle.js'))
        .pipe(gulp.dest('dist'));
});

// using gulp-requirejs-optimize.
gulp.task('scripts', function () {
    return gulp.src('app/main.js')
        .pipe(requirejsOptimize())
        .pipe(gulp.dest('dist'));
});

When I run gulp bundle or gulp scripts, it shows me same content of main.js file in output file(not showing all js template in one output file).

The output file is: 

require.config({
    paths: {
        angular: '../bower_components/angular/angular',
        jquery: '../bower_components/jquery/dist/jquery',
        angularResource: '../bower_components/angular-resource/angular-resource',
        angularRoute: '../bower_components/angular-route/angular-route',
        publicModule: 'public_module',
        route: 'route'
    },
    shim: {
        'app': { deps: ['angular'] },
        'angularRoute': ['angular'],
        angular: { exports: 'angular' }
    }
});
define('main', [], function () {
    return;
});

How can I configure gulp to put every js template into one js file?

Upvotes: 1

Views: 4764

Answers (2)

yeahdixon
yeahdixon

Reputation: 6934

check the docs for all the options for amdoptimize. For example you can point to your config file or add paths.

I always have trouble getting all the paths to line up, so make sure to check them diligently.

here is how you can start to put the options in:

gulp.task('requirejsBuild', function() {

    gulp.src('app/**/*.js',{ base: 'app' })
    .pipe(amdOptimize("app",{
        baseUrl: config.app,
        configFile: 'app/app-config.js',
        findNestedDependencies: true,

    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('dist'))   
});

Upvotes: 2

pederan
pederan

Reputation: 11

You are not requiring any files - you just define an empty module named main. You need to kick off you app by requiring a module, eg.

require(['app'], function (App) {
    new App().init();
});

Upvotes: 1

Related Questions