使用grunt.js合并使用RequireJS的JavaScript文件的工作项目结构？

我有一些使用RequireJS在浏览器中加载单个JavaScript模块的项目，但是我还没有优化它们。 在开发和生产中，应用程序会为每个JavaScript文件分别提出请求，现在我想用Grunt来解决这个问题。

我试图把一个简单的项目结构放在一起无济于事，所以我想知道如果有人能为我提供一个工作的例子。 我的目标如下：

1. 在开发模式下，通过为每个需要的模块发出一个单独的请求，一切在浏览器中运行。 在开发模式下不需要任何烦人的任务或串联。
2. 准备就绪后，我可以运行一个grunt任务，使用r.js优化（组合）所有JavaScript文件，并在本地进行testing。 一旦我确信优化的应用程序正确运行，我可以部署它。

为了这个对话，这是一个示例结构：

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) 

具体来说，我正在寻找一个可以开始的工作项目结构。 我的主要问题是：

1. 如果这个项目结构有缺陷，你有什么build议？
2. 究竟需要在我的grunt.js文件中，特别是要获得r.js优化器的工作？
3. 如果所有这些都不值得工作，并且有一种方法可以使用grunt watch任务在每次保存文件的时候自动在开发模式下创build所有的东西，那么我就是所有人。 我想避免任何可以减缓循环的变化，以便在浏览器中看到它。

Answer 1

我使用grunt-contrib-requirejs任务来构build基于require.js的项目。 安装它在你的项目目录中：

 npm install grunt-contrib-requirejs --save-dev 

顺便说一句：– --save-dev会将package添加到package.json中的开发依赖项中。 如果您在项目中没有使用package.json，请忽略它。

在你的grunt文件中加载任务：

 grunt.loadNpmTasks('grunt-contrib-requirejs'); 

并将configuration添加到您的grunt.initConfig

 requirejs: { production: { options: { baseUrl: "path/to/base", mainConfigFile: "path/to/config.js", out: "path/to/optimized.js" } } } 

现在，您可以将您的require.js文件构build到单个文件中，通过运行grunt requirejs通过uglifyjs将其最小化

您可以将一组不同的任务捆绑到某种主要任务中，将其添加到您的grunt文件中

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

有了这个，你可以简单地inputgrunt ，咕噜声会自动运行两个“子任务”的默认任务：lint和requirejs。

如果你需要一个特殊的生产任务：像上面那样定义它

 grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']); 

并运行它

 grunt production 

如果你需要不同的行为来进行“生产”和“发展”，比如requirejs任务，你可以使用所谓的目标。 在上面的configuration示例中，它已经被定义为production 。 如果你需要的话，你可以添加另一个目标（顺便说一句，你可以通过在同一级别添加一个选项对象来为所有目标定义一个全局configuration）

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

现在回答你的问题：

1. 我肯定会在你的项目中使用一个子文件夹。 在我的情况下，我使用“src”文件夹进行开发，将其构build到用于生产的“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 

2. 往上看

3. 你可以这样做，但是我不build议在watch任务中添加requirejs，这是一个资源饥饿的任务，它会让你的机器变慢。

最后但并非最不重要的是：在玩r.js时要非常谨慎。 特别是当你想通过添加一个modules指令到您的configuration优化整个项目与r.js。 R.js将会不删除输出目录。 如果它偶然被configuration成你的系统根目录，r.js会清除你的硬盘。 被警告，我设置我的咕task任务时，永久删除了我的整个htdocs文件夹…总是添加keepBuildDir:true的你的select，当玩r.jsconfiguration。