工作使用grunt.js使用RequireJS为JavaScript文件合并项目结构？ [英] Working project structure that uses grunt.js to combine JavaScript files using RequireJS?

查看：136
本文介绍了工作使用grunt.js使用RequireJS为JavaScript文件合并项目结构？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有使用 RequireJS 在浏览器中加载个人的JavaScript模块的一些项目，但我还没有优化他们没有。在开发和生产，应用，使每一个JavaScript文件一个单独的请求，现在我想修复使用咕噜。

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


  1. 在开发模式下，一切都在浏览器发出的每个模块需要单独的请求工作。需要在开发模式下的没有繁重的任务或串联。

  2. 当我准备好了，我可以运行一个咕噜任务优化（合并）所有使用 r.js ，并测试了本地。一旦我确信优化的应用程序运行正常，我可以部署它。

下面是这次谈话的缘故样本结构：

 咕噜-requirejs，例如/
  grunt.js
  main.js（应用程序入口点）
  index.html的（引用main.js）
  LIB /（东西，main.js取决于）
    a.js
    b.js
    requirejs /
      require.js
      text.js
  建立/（优化的应用程序放在这里）
  node_modules /（必要咕噜任务住在这里）

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


  1. 如果这个项目结构是有缺陷的，你有什么建议？

  2. 究竟需要在我的 grunt.js 文件，尤其是获得r.js优化工作？

  3. 如果这一切都是不值得的工作，并有使用咕噜看任务自动在开发模式下，每次我保存文件建立的一切办法，然后，我洗耳恭听。我想避免任何减慢，从做更改看到它在浏览器中循环。


解决方案

我使用咕噜-的contrib-requirejs 任务来构建基于require.js项目。你的项目目录里面安装它：

  NPM安装咕噜-的contrib-requirejs --save-dev的

BTW： - 保存-dev的将包添加到您的开发依赖于你的package.json。如果你不使用你的项目的package.json，忽略它。

加载任务在你的呼噜声文件，

  grunt.loadNpmTasks（'咕噜-的contrib-requirejs'）;

和配置添加到您的grunt.initConfig 

  requirejs：{
  生产： {
    选项​​：{
      的baseUrl：路径/要/基地，
      mainConfigFile：路径/要/ config.js
      指出：路径/要/ optimized.js
    }
  }
}

现在你能够建立你require.js东西成将与uglifyjs通过运行最小化一个单一的文件咕噜requirejs

您可以捆​​绑一组不同的任务成某种主要任务，加入给你的呼噜声文件

  grunt.registerTask（'默认'，['绒'，'requirejs']）;

通过这一点，你可以简单地输入咕噜和呼噜声会自动运行与两个子任务默认任务：皮棉和requirejs。

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

  grunt.registerTask（'生产'，['绒'，'requirejs'，'少'，'复制']）;

和运行

 咕噜生产

如果您需要为生产，并即requirejs任务内发展不同的行为，你可以用所谓的目标。生产在它上面的配置示例的已定义为。您可以添加其他的目标，如果你需要（顺便说一句，您可以通过添加一个选项，定义所有目标的全局配置对象在同一水平上）

  requirejs：{
  //全局配置
  选项​​：{
    的baseUrl：路径/要/基地，
    mainConfigFile：路径/要/ config.js
  }，
  生产： {
    //上面覆盖默认的配置
    选项​​：{
      指出：路径/要/ production.js
    }
  }，
  发展：{
    //上面覆盖默认的配置
    选项​​：{
      指出：路径/要/ development.js
      优化：无//没有缩小
    }
  }
}

现在，你可以在同一时间咕噜requirejs 或单独与咕噜requirejs运行它们都：生产，或者你在不同的任务中定义他们：

  grunt.registerTask（'生产'，['绒'，'requirejs：生产']）;
grunt.registerTask（'发展'，['绒'，'requirejs：发展']）;

现在回答你的问题：


  1. 我肯定会在项目中使用的子文件夹。在我来说，我用发展的SRC文件夹是建设成用于生产的htdocs文件夹。该项目的布局我prefere是：

     项目/
      SRC /
        JS /
          库/
            的jquery.js
            ...
          APPNAME /
            a.js
            b.js
            ...
          main.js // require.js首发
        的index.html
        ...
      建立/
        ... //为构建过程中的一些临时文件夹中
      htdocs中/
        ... //生产版本
      node_modules /
        ...
      的.gitignore
      grunt.js
      的package.json


  2. 见上


  3. 您可以这样做，但我不会建议requirejs添加到监视任务，这是一个缺乏天然资源的任务，它将你的机器放缓明显。


最后但并非最不重要的：要非常谨慎r.js.玩耍时尤其是当你希望通过增加一个模块指令你的配置来优化与r.js整个项目。 R.js将删除输出目录不问。如果它发生，它意外地配置为您的系统根目录，r.js将删除你的硬盘。被警告，我删除了我的整个htdocs文件夹永久前段时间在设置我的咕噜任务......总是 keepBuildDir补充：真使用R玩耍时，您的选择。 JS配置。

I have some projects that use RequireJS to 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.

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.js and test that out locally. Once I'm convinced the optimized application runs correctly, I can deploy it.

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 working project 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.js file, 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 watch task 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.

解决方案

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

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

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

Load the task in your grunt file with:

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

And add the configuration to your 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

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

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

With this, you can simply type grunt and grunt will automatically run the default task with the two 'subtasks': lint and 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: {
  // 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 requirejs or individually with grunt requirejs:production, or you define them in the different tasks with:

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.

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 modules directive 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:true to your options when playing around with the r.js config.

这篇关于工作使用grunt.js使用RequireJS为JavaScript文件合并项目结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆