Question

我正在尝试使用gulp-requirejs来构建一个演示项目。我希望结果是一个包含所有js依赖项和模板的文件。这是我的gulpfile.js

var gulp = require('gulp');
var rjs = require('gulp-requirejs');
var paths = {
  scripts: ['app/**/*.js'],
  images: 'app/img/**/*'
};

gulp.task('requirejsBuild', function() {
    rjs({
        name: 'main',
        baseUrl: './app',
        out: 'result.js'
    })
    .pipe(gulp.dest('app/dist'));

});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['requirejsBuild']);

上面的构建文件没有错误，但result.js只包含main.js和config.js的内容。不包括所有视图文件，jquery，下划线，主干。

如何配置gulp-requirejs将每个js模板放入一个js文件中？如果不是正确的方法，请您建议其他方法吗？

修改

config.js

require.config({
    paths: {
        "almond": "/bower_components/almond/almond",
        "underscore": "/bower_components/lodash/dist/lodash.underscore",
        "jquery": "/bower_components/jquery/dist/jquery",
        "backbone": "/bower_components/backbone/backbone",
        "text":"/bower_components/requirejs-text/text",
        "book": "./model-book"
    }
});

main.js

// Break out the application running from the configuration definition to
// assist with testing.
require(["config"], function() {
    // Kick off the application.
    require(["app", "router"], function(app, Router) {
        // Define your master router on the application namespace and trigger all
        // navigation from this instance.
        app.router = new Router();

        // Trigger the initial route and enable HTML5 History API support, set the
        // root folder to '/' by default.  Change in app.js.
        Backbone.history.start({ pushState: false, root: '/' });
    });
});

输出只是这两个文件的组合，这不是我的预期。

Answer 1

gulp-requirejs被大佬们列入黑名单。他们将RequireJS优化器视为自己的构建系统，与gulp不兼容。我对此并不了解，但我确实找到了amd-optimize中替代我的替代方案。

npm install amd-optimize --save-dev

然后在你的gulpfile中：

var amdOptimize = require('amd-optimize');
var concat = require('gulp-concat');

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

amdOptimize的输出是一个流，它包含主模块（上例中的main）的依赖关系，其顺序在加载时正确解析。然后，这些文件通过concat连接到一个文件main-bundle.js，然后写入dist文件夹。

您还可以根据需要缩小此文件并执行其他转换。

顺便说一下，在我的情况下，我正在将TypeScript编译成AMD模块进行捆绑。通过进一步思考，我意识到捆绑所有东西时我不需要AMD / RequireJS提供的异步加载。我将尝试使用TypeScript编译CommonJS模块，然后使用webpack或browserify将它们捆绑起来，这两者似乎都在gulp中得到了很好的支持。

Answer 2

<强>更新

我的上一个答案总是报告taskReady即使requirejs报告错误。我重新考虑了这种方法并添加了错误记录。此外，我尝试完全失败，如此处所述[{3}}，因为沉默失败真的会占用你的时间。请参阅下面的更新代码。

Drew关于黑名单的评论非常有帮助，gulp人建议直接使用requirejs。所以我发布了我的直接requirejs解决方案：

var DIST = './dist';
var requirejs = require('requirejs');
var requirejsConfig = require('./requireConfig.js').RJSConfig;

gulp.task('requirejs', function (taskReady) {
    requirejsConfig.name = 'index';
    requirejsConfig.out = DIST + 'app.js';
    requirejsConfig.optimize = 'uglify';
    requirejs.optimize(requirejsConfig, function () {
        taskReady();
    }, function (error) {
        console.error('requirejs task failed', JSON.stringify(error))
        process.exit(1);
    });
});

./dist/app.js处的文件已构建并已升级。通过这种方式gulp将知道何时需要完成构建。所以任务可以用作依赖。

Answer 3

我的解决方案是这样的：

./客户机/ JS / main.js：

require.config({
    paths: {
        jquery: "../vendor/jquery/dist/jquery",
        ...
    },
    shim: {
        ...
    }
});

define(["jquery"], function($) {
    console.log($);
});

./ gulpfile.js：

var gulp = require('gulp'),
    ....
    amdOptimize = require("amd-optimize"),
    concat = require('gulp-concat'),
    ...

gulp.task('scripts', function(cb) {

    var js = gulp.src(path.scripts + '.js')
        .pipe(cached('scripts'))
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(remember('scripts'))
        .pipe(amdOptimize("main",
            {
                name: "main",
                configFile: "./client/js/main.js",
                baseUrl: './client/js'
            }
        ))
        .pipe(concat('main.js'));

        .pipe(gulp.dest(path.destScripts));
}
...

这部分很重要：

configFile: "./client/js/main.js",
baseUrl: './client/js'

这使我可以将配置保存在一个地方。否则我不得不复制我的路径并填充到gulpfile.js。

Answer 4

这对我有用。如果需要，我似乎应该通过gulp添加uglification等。 .pipe(uglify()) ...

目前我必须复制main.js中的配置才能异步运行。

    ....

    var amdOptimize = require("amd-optimize");

    ...

    var js = gulp.src(path.scripts + '.js')
        .pipe(cached('scripts'))
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(remember('scripts'))
        .pipe(amdOptimize("main",
            {
                name: "main",
                paths: {
                    jquery: "client/vendor/jquery/dist/jquery",
                    jqueryColor: "client/vendor/jquery-color/jquery.color",
                    bootstrap: "client/vendor/bootstrap/dist/js/bootstrap",
                    underscore: "client/vendor/underscore-amd/underscore"
                },
                shim: {
                    jqueryColor : {
                        deps: ["jquery"]
                    },
                    bootstrap: {
                        deps: ["jquery"]
                    },
                    app: {
                        deps: ["bootstrap", "jqueryColor", "jquery"]
                    }
                }
            }

        ))
        .pipe(concat('main.js'));

Answer 5

在你的gulpfile中试试这段代码：

// Node modules
var
    fs = require('fs'),
    vm = require('vm'),
    merge = require('deeply');    

// Gulp and plugins
var
    gulp = require('gulp'),    
    gulprjs= require('gulp-requirejs-bundler');

// Config
var
    requireJsRuntimeConfig = vm.runInNewContext(fs.readFileSync('app/config.js') + '; require;'),
    requireJsOptimizerConfig = merge(requireJsRuntimeConfig, {
        name: 'main',
        baseUrl: './app',
        out: 'result.js',
        paths: {
            requireLib: 'bower_modules/requirejs/require'
        },
        insertRequire: ['main'],
        // aliases from config.js - libs will be included to result.js
        include: [
            'requireLib',
            "almond",
            "underscore",
            "jquery",
            "backbone",
            "text",
            "book"
        ]
    });

gulp.task('requirejsBuild', ['component-scripts', 'external-scripts'], function (cb) {
    return gulprjs(requireJsOptimizerConfig)            
        .pipe(gulp.dest('app/dist'));
});

Answer 6

抱歉我的英文。这个解决方案适合我。（我在工作中使用了gulp-requirejs）

我认为您已经忘记在gulpfile.js中设置mainConfigFile。所以，这段代码将起作用

gulp.task('requirejsBuild', function() {
    rjs({
        name: 'main',
        mainConfigFile: 'path_to_config/config.js',
        baseUrl: './app',
        out: 'result.js'
    })
    .pipe(gulp.dest('app/dist'));

});

另外，我认为当您在gulp中运行该任务时，require无法找到其配置文件并且

Answer 7

这不是gulp-requirejs的错误。

只有main.js和config.js在输出中的原因是因为您不需要/定义任何其他文件。如果不这样做，require优化器就不会理解要添加的文件，配置文件中的路径不是要求它们的方式！

例如，您可以从配置文件加载main.js文件，并在main中定义所有文件（不是最佳的，只是一个示例）。

在配置文件的底部：

// Load the main app module to start the app
requirejs(["main"]);

main.js文件:(只需添加jquery即可显示该技术。

define(["jquery"], function($) {});

我也可能会推荐gulp-requirejs-optimize，主要是因为它增加了gulp-requirejs缺少的缩小/混淆函数：https://github.com/jlouns/gulp-requirejs-optimize

如何实施：

var requirejsOptimize = require('gulp-requirejs-optimize');

gulp.task('requirejsoptimize', function () {
  return gulp.src('src/js/require.config.js')
    .pipe(requirejsOptimize(function(file) {
      return {
        baseUrl: "src/js",
        mainConfigFile: 'src/js/require.config.js',
        paths: {
          requireLib: "vendor/require/require"
        },
        include: "requireLib",
        name: "require.config",
        out: "dist/js/bundle2.js"
      };
  })).pipe(gulp.dest(''));
});

使用Gulp构建requireJS项目 - gulp-requirejs

7 个答案: