一个多应用项目的Grunt & requirejs优化器

I'm having issues getting Grunt to perform requirejs optimization on a project with the following structure:

在一个项目中，我遇到了这样的问题:

static/js    |── apps        |── app.js        |── dash.js        |── news.js        ... (many more 'app' files)    |── build    |── collections    |── libs    |── models    |── util    |── views

Each of static/js/apps/*.js should be compiled to static/js/build/*.js containing the relevant dependencies (eg. views/view1, libs/query etc).

每个静态/ js /应用程序/ *。js应该编译为静态/js/build/*。包含相关依赖项的js(如。视图/ view1,库/查询等)。

This is currently being performed by a basic bash script:

这目前由一个基本的bash脚本执行:

JS_ROOT="static/js"for f in ${JS_ROOT}/apps/*do    FILE=$(basename -s .js ${f})    pushd .    cd ${JS_ROOT} && r.js -o baseUrl=. name=libs/require-min.js include=apps/${FILE} out=build/${FILE}.js    popddone

I'm attempting to move to a Grunt-based optimization, with the following in Grunt.js:

我正试图转向基于垃圾邮件的优化，以下是垃圾邮件。js:

requirejs: {    compile: {        options: {            appDir: 'static/js/',            baseUrl: './apps/',            dir: 'static/js/build/',            modules: [                {                    name: 'app',                }            ]        }    }}

Running generates the following error:

运行产生以下错误:

>> Tracing dependencies for: app>> Error: ENOENT, no such file or directory>> 'static/js/build/apps/libs/jquery.js'>> In module tree:>>     app

I can clearly see what the problem is, but am failing to figure out how to indicate that the dependencies in each static/js/apps/*.js file are in static/js/ not static/js/build

我可以清楚地看到问题是什么，但是我不知道如何指出每个静态/js/app /*中的依赖关系。js文件是静态/js/不是静态/js/构建

In addition to this, I'm assuming that the modules block containing name: 'app' should be outputting the compiled file static/js/build/app.js from the contents of static/js/apps/app.js.

除此之外，我还假设包含name: 'app'的模块块应该输出编译后的文件static/js/build/app。来自静态/js/apps/app.js的内容。

Without creating an additional module block for each file in static/js/apps, how can I compile each of the files into their relevant static/js/build/*.js file?

如果不为静态/js/apps中的每个文件创建额外的模块块，如何将每个文件编译成相关的静态/js/build/*。js文件?

Update 1

更新1

So the following in my Gruntfile compiles static/js/apps/app.js successfully into static/js/build/app.js:

所以我的垃圾文件下面的内容编译静态/js/应用程序/应用程序。js成功进入静态/ js /构建/ app.js:

requirejs: {    compile: {        options: {            baseUrl: 'static/js/',            include: './apps/app.js',            out: 'static/js/build/app.js',        }    }}

The next step being to compile static/js/apps/*.js into static/js/build/*.js without having to define each individually...

下一步是编译静态/js/apps/*。js为静态/ js /构建/ *。js无需单独定义……

Update 2

更新2

Modifying the above to:

修改上面的:

requirejs: {    compile: {        options: {            baseUrl: '../',            include: './apps/<%= appFile %>',            out: 'static/js/build/<%= appFile %>',        }    }}

And creating the task:

并创建任务:

grunt.registerTask('buildrjs', function() {    var dir='static/js/apps/';    grunt.file.setBase(dir);    var files = grunt.file.expand(['*.js']);    files.forEach(function(filename) {        grunt.log.write('Compiling '+filename+'\n');        grunt.config.set('appFile', filename);        grunt.task.run('requirejs:compile');    });});

Almost gets me to the solution. The tasks runs through each file in static/js/apps/ and passes the filename into grunt.config.set('appFile', filename);. The output of the task outputs Compiling app.js Compiling news.js... etc, however afterwards the actual requirejs:compile tasks runs over & over on the last file in the static/js/apps/ directory, rather than each individual file. An async issue?

我差点找到答案。任务运行在静态/js/apps/中的每个文件中，并将文件名传递到grun. config中。集(appFile,文件名);。任务输出的输出编译应用程序。js编译news.js…然而，之后的实际需求是:编译任务在静态/js/apps/目录中的最后一个文件上运行，而不是在每个单独的文件上运行。一个异步的问题?

2 个解决方案

#1

Solved, by passing multiple sets of options to the requirejs task, thanks to this article for the final pointers I needed:

通过向requirejs任务传递多组选项，解决了这个问题。

module.exports = function(grunt) {    var files = grunt.file.expand('static/js/apps/*.js');    var requirejsOptions = {};    files.forEach(function(file) {        var filename = file.split('/').pop();        requirejsOptions[filename] = {            options: {                baseUrl: 'static/js/',                include: './apps/'+filename,                out: 'static/js/build/'+filename            }        };    });    grunt.initConfig({        pkg: grunt.file.readJSON('package.json'),        requirejs: requirejsOptions,    });};

Then the ['requirejs'] task can be run as normal and will output the appropriate compiled .js file as per each of the options: {} blocks that were specified in requirejsOptions, eg:

然后，['requirejs']任务可以正常运行，并根据每个选项(如requirejsOptions中指定的{}块)输出适当的编译后的.js文件。

grunt.registerTask('default', ['requirejs']);

咕哝。registerTask(“违约”,[' requirejs ']);

#2

You need to change baseUrl to static/js from apps in requirejs build config. As currently baseUrl is pointing to apps directory, require is trying to search dependency files in apps directory. If you change the baseUrl to static/js it will find those dependency files.

您需要将baseUrl从requirejs构建配置中的应用程序更改为静态/js。目前baseUrl指向apps目录，require试图在apps目录中搜索依赖文件。如果您将baseUrl更改为静态/js，它将找到那些依赖文件。

   requirejs: {     compile: {       options: {         appDir: 'static/js/',         baseUrl: 'static/js',         dir: 'static/js/build/',         modules: [          {                name: 'app',          }         ]       }     }   }