咕噜声 + 要求.js简单网站的配置

Grunt + require.js config for a simple website

本文关键字：简单网 网站 配置 简单 js 要求      更新时间：2023-09-26

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

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 文件，而其他文件只是复制到构建文件夹。如何为此任务编写咕噜.js配置？看来我应该使用grunt-contrib-require。

第二个问题是如何将 1.html 和 2.html（我使用需要文本！插件）编译成一行，并包含这些行来构建/js/main.js？在这种情况下，构建文件夹中应该只有两个文件 - index.html和main.js。

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

Grunt 网站提供了一个非常好的教程来帮助您入门，这就是您需要的：

  • grunt-contrib-concat - 将文件放在一个中
  • grunt-contrib-copy - 将文件复制到您的"构建"文件夹
  • grunt-usemin - 在 html 中使用编译的 js 文件

我不确定如何将这些 html 文件放在一起，这样做感觉很奇怪，但也许你可以找到一个插件。

您的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非常有用。如果是这种情况，请在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"
    }
  }
}

您可以考虑将 grunt-require 添加到 luschn 组合的列表中。它使用r.js，有很多选择，而且非常好。

相关文章：