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

ここで、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 フォルダーのすべてが含まれていませんか?

どんな助けでも大歓迎です！

ありがとう！

4

3 に答える 3

4

受け入れられた答えが役に立たないと思います。私はそれが古い質問であることを知っていますが、同じ問題に遭遇したので、スレッドスターターではなく、同じ状況にある人々のための私の解決策を次に示します。

おそらくあなたが抱えている主な問題は、require-files が間違った方法でセットアップされていることです。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

これは私のうなり声です：

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 に答える