0

I have been following these two tutorials for first adding gulp.js & configuring package.json

But when go to Task Runner Explorer and right click on less Task and run it. Nothing happens.

./gulpfile.js

/// <binding BeforeBuild='less' Clean='clean' />
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    fs = require("fs"),
    less = require("gulp-less");

var project = require('./project.json'); 

var paths = {
    webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("less", function () {
    return gulp.src('Styles/main.less')
      .pipe(less())
      .pipe(gulp.dest(project.webroot + '/css'));
});

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
      .pipe(concat(paths.concatJsDest))
      .pipe(uglify())
      .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
      .pipe(concat(paths.concatCssDest))
      .pipe(cssmin())
      .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

./package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.1",
    "rimraf": "^2.5.4",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "^0.1.7",
    "gulp-uglify": "^2.0.0",
    "gulp-minify-html": "^1.0.6",
    "gulp-ext-replace": "^0.3.0",
    "gulp-less": " 3.0.2" 
  }
}

./Sytles/main.less

@base: #663333;
@background: spin(@base, 180);
@lighter: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

body {
    background-color:@background;
}
.baseColor  {color:@base}
.bgLight    {color:@lighter}
.bgLight2   {color:@lighter2}
.bgDark     {color:@darker}
.bgDark2    {color:@darker2}

1 Answer 1

0

Your less task looks wrong. Should be something like:

gulp.task("less", function () {
    return gulp.src("./wwwroot/styles/less/**/*.less")
      .pipe(less())
      .pipe(gulp.dest(project.webroot + '/css'));
});

If you have aspnet core project all assets are located in wwwroot. In your example you're looking at ./Styles/...., should be ./wwwroot/styles/{path-to-less-files}.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.