2015-04-20 136 views
1

我使用requirejs和gulp來構建角應用程序。我正在使用amd-optimizegulp-requirejs-optimize將所有js文件添加到單個文件中。這裏是我的main.js文件:requirejs優化與吞噬

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

而且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')); 
 
});

當我運行gulp bundlegulp scripts,它顯示我的相同的內容輸出文件中的文件(不在一個輸出文件中顯示所有js模板)。

輸出文件是:

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

如何配置一口把每一個JS模板到一個js文件?

回答

1

您不需要任何文件 - 您只需定義一個名爲main的空模塊。 你需要通過需要一個模塊來啓動你的應用程序,例如。

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

2

檢查文檔爲amdoptimize所有選項。例如,您可以指向您的配置文件或添加路徑。

我總是遇到麻煩排列所有路徑,所以請務必勤勉地檢查它們。

這裏是你如何開始把選項:

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