Gulp没有在Visual Studio 2015中编译LESS文件?

时间:2016-10-25 20:58:02

标签: css node.js twitter-bootstrap visual-studio-2015 gulp

我还是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文件以及我的自定义文件。

这是我的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终止进程”。这可能是正确的,因为我没有“默认”任务。

enter image description here

这是我的文件夹结构。我正在尝试将已编译的.css文件转到Content文件夹。

enter image description here

我不应该看到我的任务命名为“无构建”吗?我是否必须执行运行“无构建”任务的“默认”任务?

更新

任务出现后出现新错误。 enter image description here

1 个答案:

答案 0 :(得分: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')