javascript - library - Grunt+require.js config para un sitio web simple

requirejs download

Question

Tengo la siguiente estructura simple para mi sitio web:

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

Quiero que todos los archivos js + lib se compilen en un archivo build / js / main.js y otros archivos para copiar en la carpeta de compilación. ¿Cómo escribir la configuración de grunt.js para esta tarea? Parece que debería usar grunt-contrib-require ...

La segunda pregunta es cómo compilar 1.html y 2.html (uso el plugin require text!) En una línea para cada uno e incluir estas líneas para compilar / js / main.js? En este caso, debería haber solo dos archivos en la carpeta de compilación: index.html y main.js.

Answer 1

El sitio web de Grunt ofrece un muy buen tutorial para que pueda comenzar, esto es lo que necesitará:

• grunt-contrib-concat - Para unir archivos en uno
• grunt-contrib-copy - Para copiar archivos a su carpeta "compilar"
• grunt-usemin - Para usar el archivo compilado js en su html

Aunque no estoy seguro de cómo juntar esos archivos html, me parece raro hacerlo, pero tal vez pueda encontrar un complemento para ello.

Answer 2

Eche un vistazo a grunt-contrib-requirejs y vea si es útil para usted.

Answer 3

Puede considerar agregar grunt-require a la lista que luschn formó. Utiliza r.js, tiene muchas opciones y es bastante bueno.

Answer 4

Su Gruntfile.js debe residir en la raíz del directorio, es decir, ls should show src/ build/ Gruntfile.js

Contenido de `Gruntfile.js específico para sus requisitos:

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'']);
};

No creo que los require-js se usen aquí. Require-js es útil cuando necesita cargar sus js scripts en un orden específico. Si ese es el caso, agregue el siguiente código en su Gruntfile.js justo debajo de pkg: grunt.file.readJSON(''package.json''), línea

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"
}
}
}