最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Grunt usemin and requirejs - Stack Overflow

programmeradmin3浏览0评论

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?

Share Improve this question edited Jan 10, 2013 at 14:01 Andreas Köberle asked Jan 9, 2013 at 22:41 Andreas KöberleAndreas Köberle 111k58 gold badges280 silver badges307 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

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

发布评论

评论列表(0)

  1. 暂无评论