Question

我有一些项目使用RequireJS在浏览器中加载单个JavaScript模块，但我还没有对它们进行优化。在开发和生产中，应用程序为每个JavaScript文件单独发出请求，现在我想使用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优化器工作？
如果所有这些都不值得工作，并且有一种方法可以使用grunt watch任务在每次保存文件时自动构建开发模式中的所有内容，那么我全都听见了。我想避免任何减慢循环的事情，无法进行更改，直到在浏览器中看到它。

Answer 1

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

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

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

使用以下命令将任务加载到您的grunt文件中：

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文件中

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

有了这个，您只需键入grunt，grunt将自动运行两个'子任务'的默认任务：lint和requirejs。

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

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

并使用

运行它

grunt production

如果你需要内部'生产'和'开发'的不同行为，即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
    }
  }
}

现在，您可以使用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。 R.js会在不询问的情况下删除输出目录。如果发生意外配置为您的系统root，则r.js将清除您的HDD。请注意，我在设置我的grunt任务时永久删除了我的整个htdocs文件夹...在使用r.js配置时，总是将keepBuildDir:true添加到您的选项中。

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

1 个答案: