使用gulp进行要求优化

Question

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

​

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 bundle或gulp scripts时，它在输出文件中显示main.js文件的相同内容(不是在一个输出文件中显示所有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;
});

​

如何将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的空模块。你需要通过需要一个模块来启动你的应用，例如。

​

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

​