简体   繁体   English

Gulp无法在Visual Studio 2015中编译LESS文件?

[英]Gulp not compiling LESS file in Visual Studio 2015?

I'm still new to Gulp and have only used it once on a sample project but that was a few months ago. 我还是Gulp的新手,在一个示例项目中只使用过一次,但这是几个月前。 Now I'm trying to use it in a new Test app for work. 现在,我正在尝试在新的测试应用程序中使用它。 At the moment all I'm looking to do is compile my Bootstrap.less with my styles.less and main.less in order to make a CSS file. 目前,我要做的就是用我的styles.less和main.less编译Bootstrap.less以便创建CSS文件。

I went through the npm init to setup the package.json file. 我经历了npm init来设置package.json文件。 I then added a gulpfile.js with the following code into the root of my project. 然后,我将带有以下代码的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'));
});

I also ran all of the following npm commands. 我还运行了以下所有npm命令。

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

I've also created a Content\\LESS folder that has the Bootstrap.less files as well as my custom less files. 我还创建了一个Content \\ LESS文件夹,其中包含Bootstrap.less文件以及我的自定义较少文件。

This is my styles.less file. 这是我的styles.less文件。

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

This is all that's in my main.less file for now. 现在,这就是我的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; }

When I open up the Task Runner Explorer in Visual Studio 2015 I'm expecting to see the "build-less" task but I don't see it. 当我在Visual Studio 2015中打开Task Runner Explorer时,我期望看到“无构建”任务,但看不到。 When I click on default I get an "Process terminated with code 1." 当我单击默认时,我得到“进程终止,代码为1”。 which is probably correct since I don't have a "default" task. 这可能是正确的,因为我没有“默认”任务。

在此处输入图片说明

Here is my folder structure. 这是我的文件夹结构。 I'm trying to get the compiled .css file to go in to the Content folder. 我正在尝试使已编译的.css文件进入Content文件夹。

在此处输入图片说明

Shouldn't I see my Task named "build-less"? 我是否应该看到名为“无构建”的任务? Do I have to have a "default" task that runs my "build-less" task? 我是否必须具有运行“无构建”任务的“默认”任务?

UPDATE 更新

New error once Task showed up. 出现任务后出现新错误。 在此处输入图片说明

Just remove the return from your task: 只需从任务中删除收益:

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

On your updated question the issue is that you haven't define the less . 在更新的问题上,问题在于您还没有定义less You can do it by installing gulp-less and then in your gulpfile: var less = require('gulp-less') 您可以通过安装gulp-less gulp的文件,然后在gulpfile中安装它: var less = require('gulp-less') gulp var less = require('gulp-less')

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM