Question

我正在尝试学习一些关于节点的知识。我已经成功建立了一个节点静态Web服务器，我希望得到引导程序。我想对我的节点项目使用Less。

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

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

我有两个问题......

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

Answer 1

我会使用Grunt执行此操作，我认为它会很有效。我没有遇到过更自动化的运行任务的方法，并且在几个存储库上使用Grunt（即https://github.com/dreamyguy）。也可以使用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的级联效果可能会产生不需要的覆盖。

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

1 个答案: