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

Working project structure that uses grunt.js to combine JavaScript files using RequireJS?

提问by Chris Calo

I have some projects that use RequireJSto load individual JavaScript modules in the browser, but I haven't optimized them yet. In both development and production, the app makes a separate request for each JavaScript file, and now I would like to fix that using Grunt.

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

I have tried to put together a simple project structure to no avail, so I'm wondering if someone can provide a working example for me. My goals are the following:

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

1. In development mode, everything works in the browser by issuing a separate request for each required module. No grunt tasks or concatenation are required in development mode.
2. When I'm ready, I can run a grunt task to optimize (combine) all of the JavaScript files using r.jsand test that out locally. Once I'm convinced the optimized application runs correctly, I can deploy it.

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

Here's a sample structure for the sake of this conversation:

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

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)

Specifically, I'm looking for a workingproject structure that I can start from. My main questions are:

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

1. If this project structure is flawed, what do you recommend?
2. What exactly needs to be in my grunt.jsfile, especially to get the r.js optimizer working?
3. If all of this isn't worth the work and there's a way to use the grunt watchtask to automatically build everything in development mode every time I save a file, then I'm all ears. I want to avoid anything that slows down the loop from making a change to seeing it in the browser.

1. 如果这个项目结构有缺陷，你有什么建议？
2. 我的grunt.js文件中到底需要什么，特别是为了让 r.js 优化器工作？
3. 如果所有这些都不值得工作，并且有一种方法可以watch在每次我保存文件时使用 grunt任务在开发模式下自动构建所有内容，那么我全神贯注。我想避免任何会减慢循环从进行更改到在浏览器中看到它的事情。

回答by Marcello di Simone

I use the grunt-contrib-requirejstask to build project based on require.js. Install it inside your project directory with:

我使用grunt-contrib-requirejs任务基于 require.js 构建项目。使用以下命令将其安装在您的项目目录中：

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

BTW: --save-devwill add the package to your development dependencies in your package.json. If you're not using a package.json in your project, ignore it.

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

Load the task in your grunt file with:

使用以下命令在 grunt 文件中加载任务：

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

And add the configuration to your grunt.initConfig

并将配置添加到您的 grunt.initConfig

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

Now you're able to build your require.js stuff into a single file that will be minimized with uglifyjs by running grunt requirejs

现在您可以将 require.js 内容构建到一个文件中，该文件将通过运行 uglifyjs 最小化 grunt requirejs

You can bundle a set of different tasks into some sort of main task, by adding this to your grunt file

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

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

With this, you can simply type gruntand grunt will automatically run the default task with the two 'subtasks': lint and requirejs.

有了这个，你可以简单地输入grunt，grunt 将自动运行带有两个“子任务”的默认任务：lint 和 requirejs。

If you need a special production task: define it like the above

如果您需要特殊的生产任务：如上定义

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

and run it with

并运行它

grunt production

If you need different behaviors for 'production' and 'development' inside i.e. the requirejs task, you can use so called targets. In the configuration example above it's already defined as production. You can add another target if you need (BTW, you can define a global config for all targets by adding a options object on the same level)

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

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
    }
  }
}

Now you can run them both at the same time with grunt requirejsor individually with grunt requirejs:production, or you define them in the different tasks with:

现在您可以同时grunt requirejs或单独运行它们grunt requirejs:production，或者您可以在不同的任务中定义它们：

grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);

Now to answer your questions:

现在回答你的问题：

1. I would definitely use a subfolder in your project. In my case I use a 'src' folder for development that is build into a 'htdocs' folder for production. The project layout I prefere is:

   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. see above

3. You can do so, but I wouldn't recommend to add requirejs to the watch task, it's a resource hungry task and it will slow down your machine noticeable.

1. 我肯定会在您的项目中使用子文件夹。就我而言，我使用“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
   

2. 往上看

3. 您可以这样做，但我不建议将 requirejs 添加到 watch 任务中，这是一个资源匮乏的任务，它会显着降低您的机器速度。

Last but not least: Be very cautious when playing around with r.js. Especially when you want to optimize the whole project with r.js by adding a modulesdirective to your config. R.js will delete the output directory without asking. If it happens that it is accidentally configured to be your system root, r.js will erase your HDD. Be warned, I erased my whole htdocs folder permanently some time ago while setting up my grunt task... Always add keepBuildDir:trueto your options when playing around with the r.js config.

最后但并非最不重要的一点：在使用 r.js 时要非常谨慎。特别是当您想通过向modules配置添加指令来使用 r.js 优化整个项目时。R.js 会不经询问就删除输出目录。如果碰巧它被意外配置为您的系统根目录，r.js 将擦除您的硬盘。请注意，前段时间我在设置我的 grunt 任务时永久删除了我的整个 htdocs 文件夹......keepBuildDir:true在使用 r.js 配置时总是添加到你的选项中。