Grunt& requirejs优化器用于多应用程序项目 [英] Grunt & requirejs optimizer for a multi app project

问题描述

  static / js $我有一些问题让Grunt对以下结构的项目执行requirejs优化： b $ b |──apps 
 |──app.js 
 |──dash.js 
 |──news.js 
 ...（更多'app'文件）
 |──构建
 |──集合
 |──libs 
 |──模型
 |──util 
 |──views 
  

每个 static / js / apps / *。js 应该被编译为包含相关依赖关系的 static / js / build / *。js （例如 views / view1 ， libs / query 等）。

目前正在由一个基本的bash脚本执行 p>

  JS_ROOT =static / js
 
 for $ {JS_ROOT} / apps / * 
 
 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 
 popd 
 done 
  

我试图转移到基于Grunt的优化，在 Grunt.js 中包含以下内容：

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

运行会产生以下错误：

 >>追踪依存关系：app 
>>错误：ENOENT，没有这样的文件或目录
>> 'static / js / build / apps / libs / jquery.js'
>>在模块树中：
>> app 
  

我可以清楚地看到问题所在，但未能弄清楚如何表明每个 static / js / apps / *。js 文件中的依赖关系都位于 static / js / not <$ c $除此之外，我假定模块 c $ c> block包含名称：'app'应该输出已编译的文件 static / js / build / app.js 从 static / js / apps / app.js 。





的内容中添加<$对于 static / js / apps 中的每个文件，c $ c> module 块，我怎样才能将每个文件编译成相关的 static / js / build / *。js file？

更新1

因此，我的Gruntfile中的以下代码将 static / js / apps / app.js 成功编译为 static / js /build/app.js ：

  requirejs：{
 compile：{
选项：{
 baseUrl：'static / js /'，
 include：'./apps/app.js'，
 out：'static / js / build / app.js'， 
} 
} 
} 
  

下一步是编译 static / js / apps / *。js 转换为 static / js / build / *。js ...

更新2

修改上述内容到 p>

  requirejs：{
 compile：{
 options：{
aseUrl：'../' ，
包括：'./apps/<%= appFile％>'，
 out：'static / js / build /<％= appFile％>'，
} 
} 
} 
  

并创建任务：

  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 +'\\\
'）; 
 grunt.config.set（'appFile'，filename ）; 
 grunt.task.run（'requirejs：compile'）; 
}）; 
}）; 
  

几乎让我接触到解决方案。这些任务遍历 static / js / apps / 中的每个文件，并将文件传递到 grunt.config.set（'appFile'，filename）; 。任务输出结果编译app.js编译news.js ... 等，然而实际上 requirejs：compile 任务在&在 static / js / apps / 目录中的最后一个文件上，而不是每个单独的文件。一个异步的问题？

解决方案

通过将多组选项传递给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] = {
选项：{
 baseUrl：'static / js /'，
 include：'./apps/'+filename，
 out：'static / js / build /'+文件名
} 
}; 
}）; 
 
 grunt.initConfig（{
 pkg：grunt.file.readJSON（'package.json'），
 requirejs：requirejsOptions，
}）; 
}; 
  

然后 ['requirejs'] 任务可以像平常一样运行，并将根据选项中的每一个输出适当的编译后的.js文件：{> requirejsOptions code>，例如：



grunt.registerTask（'default'，['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).

This is currently being performed by a basic bash script:

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
    popd
done

I'm attempting to move to a Grunt-based optimization, with the following in Grunt.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

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.

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?

Update 1

So the following in my Gruntfile compiles static/js/apps/app.js successfully into static/js/build/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...

Update 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?

解决方案

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

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:

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

这篇关于Grunt&amp; requirejs优化器用于多应用程序项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！