Grunt + 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文件編譯成一個build / js / main.js文件，並將其他文件復制到build文件夾中。 如何為此任務編寫grunt.js配置？ 看來我應該使用grunt-contrib-require ..

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

Answer 1

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

Answer 2

Grunt網站提供了一個非常好的教程來幫助您入門，這就是您需要的：

• grunt-contrib-concat - 將文件放在一起
• grunt-contrib-copy - 將文件復制到“build”文件夾
• grunt-usemin - 在html中使用已編譯的js文件

我不知道如何將這些html文件放在一起，雖然感覺很奇怪，但也許你可以找到它的插件。

Answer 3

你的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 。 當您需要按特定順序加載js scripts時， Require-js很有用。 如果是這種情況，請在pkg: grunt.file.readJSON('package.json'),下面的Gruntfile.js添加以下代碼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

您可以考慮將grunt-require添加到luschn放在一起的列表中。 它使用r.js，有很多選項，而且相當不錯。