Grunt + require.jsconfiguration一个简单的网站

我的网站有以下简单的结构:

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 

我想要所有的js + lib文件被编译成一个build / js / main.js文件和其他文件,只是要复制到生成文件夹。 如何为此任务编写grunt.jsconfiguration? 看来我应该使用grunt-contrib-require ..

第二个问题是如何将1.html和2.html(我使用require text!插件)编译成每行一行,并包含这些行以构build/ js / main.js? 这种情况下应该只有两个文件到生成文件夹 – index.html和main.js.

       

网上收集的解决方案 "Grunt + require.jsconfiguration一个简单的网站"

Grunt网站提供了一个非常好的教程,让你开始,这是你将需要:

  • grunt-contrib-concat – 将文件放在一起
  • grunt-contrib-copy – 将文件复制到“build”文件夹
  • grunt-usemin – 在你的html中使用编译后的js文件

我不知道如何将这些HTML文件放在一起,感觉很奇怪,但也许你可以find一个插件。

看看grunt-contrib-requirejs ,看看它是否对你有帮助。

你的Gruntfile.js应该驻留在目录的根目录下,例如: ls should show src/ build/ Gruntfile.js

`Gruntfile.js内容特定于您的要求:

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

我不认为require-js在这里使用require-js 。 当您需要以特定顺序加载您的js scripts时, Require-js会很有帮助。 如果是这种情况,请在pkg: grunt.file.readJSON('package.json'),下面的Gruntfile.js添加以下代码pkg: grunt.file.readJSON('package.json'),

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

你可以考虑在luschn放在一起的列表中joingrunt-require 。 它使用r.js,有很多的select,是相当不错的。