在 Sublime Text 中使用 Less2css 编译两个单独的 CSS 文件答案

【问题标题】：Compile two separate CSS files with Less2css in Sublime Text在 Sublime Text 中使用 Less2css 编译两个单独的 CSS 文件
【发布时间】：2014-08-15 08:28:07
【问题描述】：

我有这个结构

includes/
    less/
        main.less
    css/
        main.css

它工作正常，但我现在需要这个：

includes/
    less/
        main.less
        admin.less
    css/
        main.css
        admin.css

我有一个编译成 main.css 的 less 文件。
现在我也有 admin.less 我想编译成 admin.css。
但是我只能在less2css设置中指定一个输入输出：

"less2css":
{
    "autoCompile": true,
    "minify": true,
    "main_file": "/includes/less/core.less",
    "outputFile": "/includes/css/main.css"
}

我该怎么做？
或者有没有更好的编译器编译 @ save for Sublime Text？

【问题讨论】：

标签： sublimetext2 sublimetext3 sublime-text-plugin

【解决方案1】：

我建议您不要在 Sublime Text 内部编译，而是使用外部构建系统，例如 gulp。 Gulp 可以观察你的文件的变化，然后根据它做事。如果你有 node 和 npm 设置，运行这些命令来设置 gulp 和 gulp 的 less 插件。

（注意：它甚至不必是一个 nodejs 项目。另外，我建议制作一个 package.json 并将 node_modules 添加到你的 gitignore 中，但现在这无关紧要。）

npm install -g gulp
npm install --save-dev gulp
npm install --save-dev gulp-less

然后，在项目的根目录下创建一个名为 gulpfile.js 的文件，并输入以下文本：

var gulp = require("gulp");
var less = require("gulp-less");

// Task to compile all less files in the project
gulp.task("less", function() {
    gulp.src("includes/less/*.less")
        .pipe(less())
        .on("error", console.error.bind(console))
        .pipe(gulp.dest("includes/css"));
});

// Task to watch less files for changes
gulp.task("watch", function() {
    gulp.watch("includes/less/*.less", ["less"]);
});

// Compile everything once and then watch for changes.
gulp.task("default", ["less", "watch"]);

运行 gulp less 编译一次 less，gulp watch 立即开始观看，普通 gulp 编译所有内容然后开始观看.

如您所见，gulp 非常强大。你可以做一些事情，比如缩小 JavaScript、编译 CoffeeScript、LiveReload 你的浏览器等等。

（对于任何错误，我深表歉意，我使用的是 iPad。）

编辑：iPad 格式错误。

【讨论】：