Grunt + require.js 配置一个简单的网站答案

【问题标题】：Grunt + require.js config for a simple websiteGrunt + require.js 配置一个简单的网站
【发布时间】：2013-10-30 09:46:58
【问题描述】：

我的网站有以下简单结构：

src
  js
    core.js
    main.js
  lib
    jquery-1.8.2.js
    require-2.1.1.js
    require-text.js
  templates
    1.html
    2.html
  index.html
build

我希望将所有 js+lib 文件编译成一个 build/js/main.js 文件，而将其他文件复制到 build 文件夹中。如何为此任务编写 grunt.js 配置？看来我应该使用 grunt-contrib-require..

第二个问题是如何将 1.html 和 2.html（我使用 require text！插件）分别编译成一行，并将这些行包含到 build/js/main.js 中？在这种情况下，构建文件夹中应该只有两个文件 - index.html 和 main.js。

【问题讨论】：

标签： javascript node.js compilation requirejs gruntjs

【解决方案1】：

看看grunt-contrib-requirejs，看看对你有没有帮助。

【讨论】：

【解决方案2】：

Grunt 网站提供了一个很好的教程来帮助您入门，这就是您所需要的：

grunt-contrib-concat - 将文件放在一起
grunt-contrib-copy - 将文件复制到“构建”文件夹
grunt-usemin - 在你的html中使用编译好的js文件

我不确定如何将这些 html 文件放在一起，这样做感觉很奇怪，但也许你可以找到一个插件。

【讨论】：

【解决方案3】：

您的Gruntfile.js 应位于目录的根目录，即ls should show src/ build/ Gruntfile.js

`Gruntfile.js 的内容具体满足您的要求：

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {

            js: {
                src: [
                    'src/js/*', 'src/lib/*'
                ],
                dest: 'build/js/combined.js'
            }
        },
        uglify: {
            js: {
                files: {
                    'build/js/main.js': ['build/js/combined.js']
                }
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['concat:js', 'uglify:js']);
};

我不认为在这里使用require-js。当您需要按特定顺序加载 js scripts 时，Require-js 很有帮助。如果是这种情况，请在 Gruntfile.js 下方的 pkg: grunt.file.readJSON('package.json'), 行中添加以下代码

requirejs: {
  compile: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      name: "path/to/almond", // assumes a production build using almond
      out: "path/to/optimized.js"
    }
  }
}

【讨论】：

【解决方案4】：

您可以考虑将grunt-require 添加到 luschn 汇总的列表中。它使用 r.js，有很多选择，而且非常好。

【讨论】：