如何在我的节点项目（本地）中包含较少版本的引导程序？

Question

我正在尝试学习一些关于 node.js 的知识。我已经成功设置了一个节点静态 Web 服务器，我想启动引导程序。我只想将 Less 用于我的节点项目。

我在想我应该这样做，但不确定是否有更好的方法？

1) 下载所有 .less 引导文件并将它们安装在我的 /css 文件夹中 2) 使用 grunt 将我所有的 less 编译成 .css 文件，然后链接到 css 文件。

我有两个问题...

1) 这个过程会起作用吗？ 2）如果这不起作用，是否有更好的工作方式？

Answer 1

我会使用Grunt 来做这件事，我认为它会很好用。我还没有遇到过更自动化的任务运行方式，并在多个存储库（即https://github.com/dreamyguy）上使用Grunt。也可以使用Gulp，但Grunt 在撰写本文时更加成熟。

您必须设置Grunt、安装grunt-contrib-less 和grunt-contrib-watch 才能查看您的文件。您的 Gruntfile.js 看起来类似于：

module.exports = function(grunt) {

    // Main project configuration
    grunt.initConfig({
        // Read NPM package information
        pkg: grunt.file.readJSON("package.json"),
        // Compile CSS files from LESS
        less: {
            dev: {
                options: {
                    paths: ["src/css"]
                },
                files: {
                    // destination         // source
                    "src/css/result1.css": "app/less/source1.less",
                    "src/css/result2.css": "app/less/source2.less",
                    "src/css/result3.css": "app/less/source3.less"
                }
            },
            dist: {
                options: {
                    paths: ["src/css"],
                    cleancss: true,
                    modifyVars: {
                        imgPath: "'http://mycdn.com/path/to/images'",
                        bgColor: "red"
                    }
                },
                files: {
                    "src/css/result1.css": "app/less/source1.less",
                    "src/css/result2.css": "app/less/source2.less"
                }
            }
        }
        // Watcher
        watch: {
            css: {
                files: "app/less/**/*.less",
                tasks: ["less:dev"]
            }
        }

    });

    // Load the grunt tasks
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    // Compile production files
    grunt.registerTask("dist", [
        "less:dist"
    ]);

    // Compile developer friendly environment
    grunt.registerTask("dev", [
        "less:dev"
    ]);

    // Default task(s).
    grunt.registerTask("default", "dist");

};

您当然必须修改以上内容以反映您的路径。

您可以在任何地方使用通配符，就像我在 app/less/**/*.less 中使用的那样。此示例将扫描文件夹 /less/ 及其所有子文件夹下的所有扩展名为 .less 的文件。请注意，当在less 或sass 等任务中包含通配符时，文件将按字母顺序编译，您仍然必须定义目标文件，如下所示：

// Compile CSS files from LESS
less: {
    dev: {
        options: {
            paths: ["src/css"]
        },
        files: {
            // several sources can be compiled into one destination, if one creates an array with the sources
            "src/css/result1.css": [
                "app/less/lib/**/*.less",
                "app/less/source1.less",
                "app/less/source3.less",
                "app/less/source7.less"
            ],
            // all files under 'bootstrap' folder and subfolders are compiled into one file
            "src/css/bootstrap.css": "app/less/bootstrap/**/*.less"
        }
    },
    dist: {
        options: {
            paths: ["src/css"],
            cleancss: true,
            modifyVars: {
                imgPath: "'http://mycdn.com/path/to/images'",
                bgColor: "red"
            }
        },
        files: {
            "src/css/result1.css": "app/less/source1.less",
            "src/css/result2.css": "app/less/source2.less"
        }
    }
}

在此任务上使用通配符时要小心，因为CSS 的级联效果可能会产生不希望的覆盖。