CODEWITHSUNDEEP
cssnode.jstwitter-bootstrapvisual-studio-2015gulp
Caverman
Caverman

Reputation: 3707

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. 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.

I went through the npm init to setup the package.json file. I then added a gulpfile.js with the following code into the root of my project. 

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 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.

This is my styles.less file.

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

This is all that's in my main.less file for now.

.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. When I click on default I get an "Process terminated with code 1." which is probably correct since I don't have a "default" task.

enter image description here

Here is my folder structure. I'm trying to get the compiled .css file to go in to the Content folder.

enter image description here

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. enter image description here

Upvotes: 0

Views: 454

Answers (1)

Vassilis Pits
Vassilis Pits

Reputation: 3848

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. You can do it by installing gulp-less and then in your gulpfile: var less = require('gulp-less')

Upvotes: 1

Related Questions