Question

我使用requirejs和gulp来构建角度应用程序。我正在使用amd-optimize和gulp-requirejs-optimize将所有js文件添加到单个文件中。这是我的main.js文件：

＆＃13;

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

＆＃13;

gulpfile.js

＆＃13;

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

＆＃13;

当我运行gulp bundle或gulp scripts时，它会在输出文件中显示main.js文件的相同内容（不会在一个输出文件中显示所有js模板）。

输出文件是：

＆＃13;

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

＆＃13;

如何配置gulp将每个js模板放入一个js文件？

Answer 1

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

Answer 2

您不需要任何文件 - 您只需定义一个名为main的空模块。您需要通过要求模块启动应用程序，例如

＆＃13;

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

＆＃13;

用gulp进行requirejs优化

2 个答案: