css - Gulp 没有在 Visual Studio 2015 中编译 LESS 文件？

Question

我对 Gulp 还是个新手，只在一个示例元素中使用过一次，但那是几个月前的事了。现在我正尝试在新的工作测试应用程序中使用它。目前我要做的就是用我的 styles.less 和 main.less 编译我的 Bootstrap.less 以制作一个 CSS 文件。

我通过 npm init 来设置 package.json 文件。然后我将带有以下代码的 gulpfile.js 添加到我的元素的根目录中。

var gulp = require('gulp');
var uglify = require('gulp-uglify');

// Compiles LESS > CSS 
gulp.task('build-less', function () {
    return gulp.src('./Content/LESS/styles.less')
        .pipe(less())
        .pipe(gulp.dest('./Content'));
});

我还运行了以下所有 npm 命令。

npm install gulp --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev
npm install del --save-dev

我还创建了一个 Content\LESS 文件夹，其中包含 Bootstrap.less 文件以及我自定义的 less 文件。

这是我的 styles.less 文件。

@import "Bootstrap/bootstrap";
@import "main";

这就是我的 main.less 文件中的所有内容。

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

当我在 Visual Studio 2015 中打开 Task Runner Explorer 时，我希望看到“无构建”任务，但我没有看到它。当我点击默认时，我得到一个“进程以代码 1 终止”。这可能是正确的，因为我没有“默认”任务。

这是我的文件夹结构。我正在尝试让编译后的 .css 文件进入 Content 文件夹。

我不应该看到名为“build-less”的任务吗？我是否必须有一个运行我的“无构建”任务的“默认”任务？

更新

任务出现后出现新错误。

Answer 1

只需从您的任务中删除返回:

gulp.task('build-less', function () {
    gulp.src('./Content/LESS/styles.less')
        .pipe(less())
        .pipe(gulp.dest('./Content'));

关于您更新的问题，问题是您没有定义 less。你可以通过安装 gulp-less 然后在你的 gulpfile 中来实现:var less = require('gulp-less')