2

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

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

其中 optimize.js 是来自 require 的构建。它应该包括 app 文件夹、供应商文件夹和 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 文件夹中的所有内容？

任何帮助将不胜感激！

谢谢！

4

3 回答 3

4

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

您可能遇到的主要问题是您的要求文件设置错误。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-script，没有它，控制台只会说require is not defined. 为此，您只需在 gruntfile 中添加以下行：

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

你可以在这里阅读：http ://requirejs.org/docs/optimization.html#onejs

于 2016-09-30T13:49:51.190 回答
1

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

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

于 2013-06-23T13:42:51.680 回答
0

尝试使用选项 preserveLicenseComments: false。bower.js 中的许可证注释以“//”开头，然后 requirejs 会以某种方式跳过整个文件

于 2014-09-15T12:21:12.430 回答