2015-04-20 94 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')) 
});