咕嚕+ require.js配置了一個簡單的網站

Question

我有我的網站下面的簡單結構：

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文件編譯成一個編譯/ JS/main.js文件和其他文件只是要複製到生成文件夾。如何爲此任務編寫grunt.js配置？看起來我應該使用grunt-contrib-require ..

第二個問題是如何將1.html和2.html（我使用require text！plugin）編譯爲每行一行，幷包含這些行以構建/ JS/main.js？這種情況下應該只有兩個文件進入build文件夾 - index.html和main.js.

Answer 1

繁重的網站提供了一個很好的教程，讓你開始，這是你需要什麼：

• grunt-contrib-concat - 要在一個
• grunt-contrib-copy把文件放在一起 - 要將文件複製到你的「構建「文件夾
• grunt-usemin - 要使用編譯js文件在你的HTML

我不知道如何把這些HTML文件一起，雖然，感覺奇怪的做到這一點，但也許你可以找到它的插件。

Answer 2

看看grunt-contrib-requirejs看看它是否對你有幫助。

Answer 3

您可能會考慮將grunt-require添加到luschn放在一起的列表中。它使用r.js，有很多選項，並且非常好。

Answer 4

你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時很有用。如果是這種情況，請在您的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" 
    } 
    } 
}