我有一些项目使用RequireJS在浏览器中加载单独的JavaScript模块，但我还没有对它们进行优化。在开发和生产过程中，该应用程序对每个JavaScript文件都会发出单独的请求，现在我想使用Grunt来解决这个问题。
我曾试图建立一个简单的项目结构，但没有成功，所以我想知道是否有人能为我提供一个工作示例。我的目标如下：
- 在开发模式中，通过为每个所需模块发出单独的请求，浏览器中的一切都可以正常工作在开发模式中不需要繁重的任务或串联
- 准备好后，我可以运行一个grunt任务，使用r.js优化(组合)所有JavaScript文件，并在本地进行测试。一旦我确信优化的应用程序运行正确，我就可以部署它
以下是本次对话的示例结构：
grunt-requirejs-example/
grunt.js
main.js (application entry point)
index.html (references main.js)
lib/ (stuff that main.js depends on)
a.js
b.js
requirejs/
require.js
text.js
build/ (optimized app goes here)
node_modules/ (necessary grunt tasks live here)
具体来说，我正在寻找一个可以开始的工作项目结构。我的主要问题是：
- 如果这个项目结构有缺陷，你建议怎么做
- 我的
grunt.js文件中到底需要什么，尤其是为了让r.js优化器正常工作 - 如果所有这些都不值得做，并且有一种方法可以在每次保存文件时使用咕哝的
watch任务在开发模式下自动构建所有内容，那么我就洗耳恭听了。我想避免任何减慢循环速度的事情，从更改到在浏览器中查看
我使用grunt contrib requirejs任务来构建基于require.js的项目
npm install grunt-contrib-requirejs --save-dev
BTW:--save-dev会将包添加到你的package.json中的开发依赖项中。如果你在项目中没有使用package.jsn，请忽略它。
在你的咕哝文件中加载任务：
grunt.loadNpmTasks('grunt-contrib-requirejs');
并将配置添加到您的grunt.initConfig
requirejs: {
production: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
out: "path/to/optimized.js"
}
}
}
现在，您可以将require.js内容构建到一个单独的文件中，该文件将通过运行grunt requirejs使用uglifyjs最小化
您可以将一组不同的任务捆绑到某种主任务中，方法是将其添加到您的咕哝文件中
grunt.registerTask('default', ['lint', 'requirejs']);
这样，您只需键入grunt，grunt就会自动运行带有两个"子任务"的默认任务：lint和requirejs。
如果你需要一个特殊的生产任务：像上面的一样定义它
grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']);
并使用运行
grunt production
如果您在requirejs任务中需要不同的"生产"one_answers"开发"行为，则可以使用所谓的目标。在上面的配置示例中，它已经被定义为production。如果需要，您可以添加另一个目标(BTW，您可以通过在同一级别上添加选项对象来为所有目标定义全局配置)
requirejs: {
// global config
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js"
},
production: {
// overwrites the default config above
options: {
out: "path/to/production.js"
}
},
development: {
// overwrites the default config above
options: {
out: "path/to/development.js",
optimize: none // no minification
}
}
}
现在，您可以使用grunt requirejs同时运行它们，或者使用grunt requirejs:production单独运行它们，也可以使用在不同的任务中定义它们
grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);
现在回答您的问题：
我肯定会在你的项目中使用一个子文件夹。在我的案例中，我使用一个"src"文件夹进行开发，该文件夹被构建到一个"htdocs"文件夹中用于生产。我更喜欢的项目布局是：
project/ src/ js/ libs/ jquery.js ... appname/ a.js b.js ... main.js // require.js starter index.html ... build/ ... //some tmp folder for the build process htdocs/ ... // production build node_modules/ ... .gitignore grunt.js package.json参见上文
你可以这样做，但我不建议在监视任务中添加requirejs，这是一项资源匮乏的任务，它会显著降低你的机器速度。
最后但同样重要的是：在玩r.js时要非常谨慎。尤其是当你想通过在配置中添加modules指令来优化整个项目时。R.js会在不询问的情况下删除输出目录。如果碰巧它被意外配置为您的系统root，r.js会擦除您的HDD。请注意，一段时间前，我在设置我的繁重任务时永久删除了我的整个htdocs文件夹。。。使用r.js配置时，请始终将keepBuildDir:true添加到您的选项中。