Fatal编程技术网
  • javascript/
  • Javascript grunt contrib requirejs-需要一些建议吗

Javascript grunt contrib requirejs-需要一些建议吗

javascript optimization requirejs gruntjs

Javascript grunt contrib requirejs-需要一些建议吗,javascript,optimization,requirejs,task,gruntjs,Javascript,Optimization,Requirejs,Task,Gruntjs,我有一个具有以下结构的项目： project |──css |──img |──js |──app |──collections |──models |──views |──vendor |──jquery |──backbone |──underscore |──require app.js index.html Grunt

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

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

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
我试图使用grunt contrib requirejs将项目构建到一个www文件夹中，但我运气不好。www文件夹非常简单-它应该如下所示：

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

requirejs: 
   compile: 
      options:
     mainConfigFile: 'project/js/config.js'
     baseUrl: 'project/js'
     name: 'app'
     include: ['config']
     out: 'www/js/optimized.js'
     optimize: 'none'
其中optimized.js是来自require的构建。它应该包括app文件夹、vendor文件夹和app.js中的所有内容

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

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

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文件夹中的所有内容

任何帮助都将不胜感激

谢谢

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

有关属性的更多详细信息，请参阅

中的example.build.js，并使用选项preservelicensecoments:false进行尝试。bower.js中的许可证注释以“/”开头，不知何故requirejs跳过了整个文件，然后

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

您可能遇到的主要问题是require文件的设置方式错误。grunt作业不包含所有文件的原因很可能是因为没有正确地要求或定义这些文件。这与繁重的工作无关

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

require(["global","highcharts-chartdata"], function () {});
请看一看我的工作设置。这是文件夹结构：

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

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
这是我的Grunfile：

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']);

};

paths: {
  requireLib: "vendor/require/require"
},
include: "requireLib",
这是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-file（如下）中的代码，而main.js-file又在加载其他文件：

require(["global","highcharts-chartdata"], function () {});
如果没有这些，grunt contrib requirejs将不知道包括什么

在我们的例子中，我们希望输出一个js文件（optimized.js）以包含在起始页（index.html）中。为了实现这一点，我想指出，我们还需要添加require.js-script，没有它，控制台只会说
require未定义
。 为此，只需在GrunFile中添加以下行：

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']);

};

paths: {
  requireLib: "vendor/require/require"
},
include: "requireLib",
您可以在此处阅读相关内容：

您的应用程序下的控制台中列出了哪些依赖项？当依赖项列在依赖项数组中或显式配置要包含的依赖项时，RequireJS将只包含这些依赖项。Anzeo-路径：{app:'app'，视图：'app/views'，集合：'app/collections'，模型：'app/models'，googUrl:}您是否设法修复了此问题？我遇到了同样的问题，下面的答案没有帮助。你能解决这个问题吗？