javascript - Grunt usemin and requirejs - Stack Overflow

admin管理员组

文章数量:1431912

I use the grunt usemin plugin to pile my requirejs files. In my html page I have the following snippet:

<!-- build:js ../dist/app.min.js -->
<script data-main="js/modules/app" src="../lib/js/requirejs/requirejs.js"></script>
<!-- endbuild -->

and this is my grunt file:

/*global module:false*/
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    //run jshint, the busterjs tests and pile the handlbar templates every time a file changed
    watch: {
      files: ['Gruntfile.js', 'dev/js/*.js', 'test/**/*.js', 'dev/templates/*.hbs'],
      tasks: ['jshint', 'buster', 'handlebars']
    },
    //hint all the js files
    jshint: {
      files: ['Gruntfile.js', 'dev/js/*.js', 'test/*.js'],
      options: {
        camelcase: true,
        curly: true,
        immed: true,
        newcap: true,
        noarg: true,
        noempty: true,
        nonew: true,
        quotmark: 'single',
        trailing: true,
        maxdepth: 3,
        browser: true,
        asi: true,
        debug: true,
        eqnull: true
      }
    },
    handlebars: {
      pile: {
        files: {
          'dev/templates/templates.js': 'dev/templates/*.hbs'
        }
      }
    },
    //
    gruntContribCopy: {
      dist: {
        files: {
          'dist/index.html': 'dev/index.html'
        }
      }
    },
    //use the original index.html, as this the task which collect the files to pile
    // relative to the index.html
    'useminPrepare': {
      html: 'dev/index.html'
    },
    // use the copy in dist folder as this is where it replace the path to file relative to the passed file
    usemin: {
      html: ['dist/index.html'],
      css: ['dist/*.css']
    },
    //just uglify the concatenated the files
    uglify: {
      dist: {
        files: {
          'dist/prod.min.js': 'dist/prod.min.js',
          'dist/lib.min.js': 'dist/lib.min.js'
        }
      }
    },
    //create md5 file names for all minified sources
    md5: {
      pile: {
        files: {
          'dist': 'dist/*.min.*'
        },
        //overide the pathes in the index.html with the new md5 name
        options: {
          callback: function(newPath, oldPath, content) {
            var fs = require('fs')
            fs.unlink(oldPath);
            var file = fs.readFileSync('dist/index.html', 'utf8');
            var replacedData = file.replace(oldPath.replace('dist/', ''), newPath.replace('dist/', ''));
            fs.writeFileSync('dist/index.html', replacedData);

          }
        }
      }
    },
    //create a manifest file for all js and css files
    manifest: {
      generate: {
        src: [
          '*.js',
          '*.css'
        ],
        options: {
          basePath: 'dist/',
          network: ['*', 'http://*', 'https://*']
        }
      }
    },
    buster: {
      test: {
        config: 'test/buster.js'
      },
      server: {
        port: 1111
      }
    },
    bower: {
      install: {
        //just run 'grunt bower:install' and you'll see files from your Bower packages in lib directory
      }
    },
    connect: {
      server: {
        options: {
          port: 9001,
          keppalive: true
        }
      }
    },
    requirejs: {

    }
  });

  grunt.loadNpmTasks('grunt-buster');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.renameTask('copy', 'gruntContribCopy');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-mincss');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-manifest');
  grunt.loadNpmTasks('grunt-md5');
  grunt.loadNpmTasks('grunt-contrib-handlebars');
  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.loadNpmTasks('grunt-bower-task');


  grunt.registerTask('dist',
    ['gruntContribCopy', 'useminPrepare', 'usemin', 'requirejs', 'concat', 'uglify', 'md5', 'manifest']);

};

When I run the dist task everything works well but the requirejs task quits with:

Running "requirejs:out" (requirejs) task
Error: Missing either a "name", "include" or "modules" option
    at Function.build.createConfig (/Users/akoeberle/grunt_example/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:22690:19)

But straight before the usmin task logs this:

requirejs: {
  out: 'dist/app.min.js',
  name: 'dev/js/modules/app'
}

So as I understand the usemin task is updating the gruntConfig with the data from the build blocks in my html page, and it seems that it founds and set the options for requirejs. So whats going wrong here?

I use the grunt usemin plugin to pile my requirejs files. In my html page I have the following snippet:

<!-- build:js ../dist/app.min.js -->
<script data-main="js/modules/app" src="../lib/js/requirejs/requirejs.js"></script>
<!-- endbuild -->

and this is my grunt file:

/*global module:false*/
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    //run jshint, the busterjs tests and pile the handlbar templates every time a file changed
    watch: {
      files: ['Gruntfile.js', 'dev/js/*.js', 'test/**/*.js', 'dev/templates/*.hbs'],
      tasks: ['jshint', 'buster', 'handlebars']
    },
    //hint all the js files
    jshint: {
      files: ['Gruntfile.js', 'dev/js/*.js', 'test/*.js'],
      options: {
        camelcase: true,
        curly: true,
        immed: true,
        newcap: true,
        noarg: true,
        noempty: true,
        nonew: true,
        quotmark: 'single',
        trailing: true,
        maxdepth: 3,
        browser: true,
        asi: true,
        debug: true,
        eqnull: true
      }
    },
    handlebars: {
      pile: {
        files: {
          'dev/templates/templates.js': 'dev/templates/*.hbs'
        }
      }
    },
    //
    gruntContribCopy: {
      dist: {
        files: {
          'dist/index.html': 'dev/index.html'
        }
      }
    },
    //use the original index.html, as this the task which collect the files to pile
    // relative to the index.html
    'useminPrepare': {
      html: 'dev/index.html'
    },
    // use the copy in dist folder as this is where it replace the path to file relative to the passed file
    usemin: {
      html: ['dist/index.html'],
      css: ['dist/*.css']
    },
    //just uglify the concatenated the files
    uglify: {
      dist: {
        files: {
          'dist/prod.min.js': 'dist/prod.min.js',
          'dist/lib.min.js': 'dist/lib.min.js'
        }
      }
    },
    //create md5 file names for all minified sources
    md5: {
      pile: {
        files: {
          'dist': 'dist/*.min.*'
        },
        //overide the pathes in the index.html with the new md5 name
        options: {
          callback: function(newPath, oldPath, content) {
            var fs = require('fs')
            fs.unlink(oldPath);
            var file = fs.readFileSync('dist/index.html', 'utf8');
            var replacedData = file.replace(oldPath.replace('dist/', ''), newPath.replace('dist/', ''));
            fs.writeFileSync('dist/index.html', replacedData);

          }
        }
      }
    },
    //create a manifest file for all js and css files
    manifest: {
      generate: {
        src: [
          '*.js',
          '*.css'
        ],
        options: {
          basePath: 'dist/',
          network: ['*', 'http://*', 'https://*']
        }
      }
    },
    buster: {
      test: {
        config: 'test/buster.js'
      },
      server: {
        port: 1111
      }
    },
    bower: {
      install: {
        //just run 'grunt bower:install' and you'll see files from your Bower packages in lib directory
      }
    },
    connect: {
      server: {
        options: {
          port: 9001,
          keppalive: true
        }
      }
    },
    requirejs: {

    }
  });

  grunt.loadNpmTasks('grunt-buster');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.renameTask('copy', 'gruntContribCopy');
  grunt.loadNpmTasks('grunt-usemin');
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-mincss');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-manifest');
  grunt.loadNpmTasks('grunt-md5');
  grunt.loadNpmTasks('grunt-contrib-handlebars');
  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.loadNpmTasks('grunt-bower-task');


  grunt.registerTask('dist',
    ['gruntContribCopy', 'useminPrepare', 'usemin', 'requirejs', 'concat', 'uglify', 'md5', 'manifest']);

};

When I run the dist task everything works well but the requirejs task quits with:

Running "requirejs:out" (requirejs) task
Error: Missing either a "name", "include" or "modules" option
    at Function.build.createConfig (/Users/akoeberle/grunt_example/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:22690:19)

But straight before the usmin task logs this:

requirejs: {
  out: 'dist/app.min.js',
  name: 'dev/js/modules/app'
}

So as I understand the usemin task is updating the gruntConfig with the data from the build blocks in my html page, and it seems that it founds and set the options for requirejs. So whats going wrong here?

• javascript
• requirejs
• gruntjs

Share Improve this question Follow edited Jan 10, 2013 at 14:01 Andreas Köberle asked Jan 9, 2013 at 22:41 Andreas KöberleAndreas Köberle 111k5858 gold badges280280 silver badges307307 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Seems a bug in usemin, as the current version dont support a multitask version of the requirejs task.

本文标签： javascriptGrunt usemin and requirejsStack Overflow