Grunt & requirejs ưu cho một dự án ứng dụng đa

Question

Tôi đang gặp vấn đề nhận được Grunt để thực hiện requirejs tối ưu hóa trên một dự án với cấu trúc sau:

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

Mỗi static/js/apps/*.js nên được biên dịch để static/js/build/*.js chứa các phụ thuộc liên quan (ví dụ: views/view1, libs/query v.v.).

này hiện đang được thực hiện bởi một kịch bản bash cơ bản:

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 

Tôi đang cố gắng để di chuyển đến một tối ưu hóa Grunt có trụ sở, những điều sau đây Grunt.js:

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

Chạy tạo lỗi sau:

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

Tôi có thể thấy rõ những gì vấn đề là, nhưng đang thất bại trong việc tìm ra cách để cho biết rằng sự phụ thuộc trong mỗi tập tin static/js/apps/*.js là trong static/js/ không static/js/build

Thêm vào đó, tôi giả định rằng khối modules chứa name: 'app' nên được xuất ra file biên soạn static/js/build/app.js từ nội dung của static/js/apps/app.js.

Không tạo thêm khối module cho mỗi tệp trong static/js/apps, làm cách nào tôi có thể biên dịch từng tệp vào tệp static/js/build/*.js có liên quan của chúng?

Cập nhật 1

Vì vậy sau trong Gruntfile tôi biên dịch static/js/apps/app.js thành công vào static/js/build/app.js:

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

Bước tiếp theo là để biên dịch static/js/apps/*.js vào static/js/build/*.js mà không cần phải xác định mỗi cá nhân ...

Cập nhật 2

Sửa đổi ở trên để:

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

Và tạo ra nhiệm vụ:

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

Hầu như được tôi vào dung dịch. Các tác vụ chạy qua từng tệp trong static/js/apps/ và chuyển tên tệp vào grunt.config.set('appFile', filename);. Đầu ra của tác vụ xuất ra Compiling app.js Compiling news.js... vv, tuy nhiên sau đó các tác vụ thực tế requirejs:compile chạy trên & trên tệp cuối cùng trong thư mục static/js/apps/, thay vì từng tệp riêng lẻ. Vấn đề không đồng bộ?

Answer 1

Giải Quyết, bằng cách thông qua nhiều bộ tùy chọn với nhiệm vụ requirejs, nhờ this article cho các con trỏ thức tôi cần:

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

Sau đó, nhiệm vụ ['requirejs'] có thể chạy như bình thường và sẽ ra các tệp .js được biên dịch thích hợp theo từng khối options: {} được chỉ định trong requirejsOptions, ví dụ:

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

Answer 2

Bạn cần thay đổi baseUrl thành static/js từ ứng dụng trong cấu hình build requirejs.Vì hiện tại baseUrl đang trỏ đến ứng dụng thư mục, yêu cầu đang cố gắng tìm kiếm tệp phụ thuộc trong thư mục ứng dụng. Nếu bạn thay đổi baseUrl thành static/js, nó sẽ tìm thấy các tệp phụ thuộc đó.

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