Question

我有一个具有以下结构的项目：

project
  |──css
  |──img
  |──js
     |──app
         |──collections
         |──models
         |──views
     |──vendor
         |──jquery
         |──backbone
         |──underscore
         |──require
     app.js
  index.html
Gruntfile.js
package.json

我正在尝试使用grunt-contrib-requirejs将项目构建到www文件夹中，但我没有太多运气。 www文件夹很简单 - 它应该是这样的：

www
  |──css
  |──img
  |──js
      |──optimized.js
index.html

其中optimized.js是来自require的构建。它应该包括app文件夹，vendor文件夹和app.js

中的所有内容

现在我的Gruntfile.coffee看起来像这样：

requirejs: 
   compile: 
      options:
     mainConfigFile: 'project/js/config.js'
     baseUrl: 'project/js'
     name: 'app'
     include: ['config']
     out: 'www/js/optimized.js'
     optimize: 'none'

我的config.js文件如下所示：

requirejs.config({
    baseUrl: 'js',
    paths: {
        app: 'app',
        models: 'app/models',
        collections: 'app/collections',
        views: 'app/views'
    }
});

当我运行grunt任务时，它不会给我一个错误 - 但是输出不包含project / js文件夹中的所有内容？

非常感谢任何帮助！

谢谢！

Answer 1

我不认为接受的答案是有用的。我知道这是一个老问题，但我遇到了同样的问题，所以这是我的解决方案，不是针对线程启动器，而是针对处于同样情况的人。

您可能遇到的主要问题是您的require文件设置错误。 grunt作业不包含所有文件的原因很可能是因为文件没有正确要求或定义。它与咕噜咕噜的工作毫无关系。

有一个配置文件（在你的情况下是app.js）是不够的，你还需要这些文件。例如，您可以在main.js文件中执行此操作：

require(["global","highcharts-chartdata"], function () {});

请查看我的设置是否有效。这是文件夹结构：

Project
| 
├───dist
|   ├───css
|   |   bundle.css
|   ├───fonts
|   ├───images
|   └───js
|       bundle.js
|   index.html
|
└───src
    ├───js
    │   └───vendor
    │       ├───bootstrap
    │       ├───highcharts
    │       ├───jquery
    │       └───require
    |           require.js
    |   charts.js
    |   global.js
    |   main.js
    |   require.config.js
    └───less
        ├───bootstrap
        │   └───mixins
        ├───bootstrap_overrides
        └───font-awesome
gruntfile.js

这是我的gruntfile：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),    
    jshint: {
      files: ['src/js/*.js'],
      options: {
        globals: {
          $: false,
          console: true,
          module: true,
          document: true
        }
      }
    },
    less: {
      compile: {
        options: {
          paths: ['src/less'],
          plugins: [
            new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]}),
            new (require('less-plugin-clean-css'))
          ]
        },
        files: {
          'dist/css/bundle.css': 'src/less/style.less'
        }
      }
    },
    requirejs: {
      compile: {
        options: {
          baseUrl: "src/js",
          mainConfigFile: 'src/js/require.config.js',
          paths: {
            requireLib: "vendor/require/require"
          },
          include: "requireLib",
          name: "require.config",
          out: "dist/js/bundle.js"
        }
      }
    },
    watch: {
      files: ['src/js/*.js','src/less/**/*.less'],
      tasks: ['jshint','less','requirejs']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-requirejs');

  // Default task(s).
  grunt.registerTask('default', ['jshint','less','requirejs']);

};

这是require.config文件：

requirejs.config({
    baseUrl: 'js',
    paths: {
        "jquery": "vendor/jquery/jquery",       
        "jquery-ui": "vendor/jquery/jquery-ui",
        "bootstrap-collapse": "vendor/bootstrap/collapse",
        "bootstrap-transition": "vendor/bootstrap/transition",
        "highcharts": "vendor/highcharts/highcharts-4.1.4.min",
        "highcharts-chartdata": "charts"
    },
    shim: {
        "bootstrap": ["jquery"],
        "jquery-ui": ["jquery"], 
        "bootstrap-collapse": ["jquery"],
        "bootstrap-transition": ["jquery"],
        "highcharts" : ["jquery"],
        "highcharts-chartdata" : ["highcharts"]
    }
});

// Load the main app module to start the app
requirejs(["main"]);

请注意requirejs(["main"]);上面的行实际上是“加载”我的main.js文件（下面）中的代码，而该文件又加载了其他文件：

require(["global","highcharts-chartdata"], function () {});

如果没有这些，grunt-contrib-requirejs将不知道要包括什么。

在我们的例子中，我们想要输出一个js文件（optimized.js），以包含在您的起始页面（index.html）中。为了实现这个目的，我想指出我们还需要添加require.js脚本，如果没有它，控制台就会说require is not defined。为此，您只需在gruntfile中添加以下行：

paths: {
  requireLib: "vendor/require/require"
},
include: "requireLib",

您可以在此处阅读：http://requirejs.org/docs/optimization.html#onejs

Answer 2

尝试在grunt-contrib-requirejs配置中输入appDir和dir属性。

有关这些属性的更多详细信息，请参阅https://github.com/jrburke/r.js/blob/master/build/example.build.js中的example.build.js

Answer 3

使用选项preserveLicenseComments：false尝试它。 bower.js中的许可证评论以＆＃39; //＆＃39;开头。并以某种方式requirejs跳过整个文件然后

grunt-contrib-requirejs - 需要一点建议

3 个答案: