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?
1 Answer
Reset to default 4Seems a bug in usemin, as the current version dont support a multitask version of the requirejs task.