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 - 将文件复制到“构建”文件夹
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在这里使用。当您需要按特定顺序加载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"
    }
  }
}

添加以下代码

{{1}}

Answer 4

您可以考虑将grunt-require添加到luschn放在一起的列表中。它使用r.js，有很多选项，而且相当不错。

Grunt + require.js配置一个简单的网站

4 个答案: