Grunt + require.js configuration for a simple website

Question

I have the following simple structure for my site:

src js core.js main.js lib jquery-1.8.2.js require-2.1.1.js require-text.js templates 1.html 2.html index.html build 

I want all js + lib files to be compiled into one build / js / main.js file and other files that need to be copied to create the folder. How to write grunt.js configuration for this task? It seems I should use grunt-contrib-require ..

The second question is how to compile 1.html and 2.html (I use a plugin with text!) In one line for each and include these lines for the assembly /js/main.js? This case should contain only two files in the build folder - index.html and main.js.

Answer 1

The Grunt website offers a very good tutorial to get you started, here's what you need:

• grunt-contrib-concat - merge files into one
• grunt-contrib-copy - To copy files to the "build" folder
• grunt-usemin - use compiled js file in html

I'm not sure how to combine these html files, feeling weird, but maybe you can find a plugin for it.

Answer 2

Take a look at grunt-contrib-requirejs and see if you find it useful.

Answer 3

Your Gruntfile.js should be in the root of the directory ie ls should show src/ build/ Gruntfile.js

The content of `Gruntfile.js that meets your requirements:

 module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { js: { src: [ 'src/js/*', 'src/lib/*' ], dest: 'build/js/combined.js' } }, uglify: { js: { files: { 'build/js/main.js': ['build/js/combined.js'] } } }, }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['concat:js', 'uglify:js']); }; 

I do not think require-js will be used here. require-js is useful when you need to load your js scripts in a specific order. If so, add the code below to Gruntfile.js just below pkg: grunt.file.readJSON('package.json'), line

 requirejs: { compile: { options: { baseUrl: "path/to/base", mainConfigFile: "path/to/config.js", name: "path/to/almond", // assumes a production build using almond out: "path/to/optimized.js" } } } 

Answer 4

You might consider adding grunt-require to the list created by luschn. It uses r.js, has many options and is pretty good.