gulp-community / gulp-less Goto Github PK

I've followed the README.md to use combined for catching error messages. but I after error occurs gulp stop watching the folders. How could I solve it?(Sample code below)

thanks!

// compile less to css
gulp.task('styles', function () {
  var combined = Combine(
    gulp.src(paths.styles)
    ,less()
    ,gulp.dest('public/stylesheets')
  )
  // any errors in the above streams
  // will get caught by this listener,
  // instead of being thrown:
  combined.on('error', function(err) {
    console.info(err.message)
  });

  return combined;
});
....
....

// the task when a file changes
gulp.task('watch', function () {
  gulp.watch(paths.styles, ['styles']);
});

My less file contains mixins.
Gulp returns error while using gulp-less

Hi everyone,

I really don't understand how to use modifyVars with gulp-less. I can't find any docs about this.

Here is my code :

// ...
.pipe(less({modifyVars: {myVar: 1}});
// ...

I ran this error :
Error in plugin 'gulp-less': variable @myVar is undefined in file...

Thanks for your help

Is there a callback option to trigger another event after the build is finished?

When I run this I get "/css/main.less" and not "/css/main.css"

var gulp = require("gulp")
  , less = require("gulp-less");

gulp.task("less", function () {
  gulp.src("./less/main.less")
    .pipe(less())
    .pipe(gulp.dest("./css/"));
});

Repro:

• create bla.less>

.ts-root {
   .k-button {
      -webkit-transition:all .4s ease-in-out;
      -moz-transition:all .4s ease-in-out;
      -ms-transition:all .4s ease-in-out;
      -o-transition:all .4s ease-in-out;
      transition: all .4s ease-in-out;
   }
}

• compile

What expected:

compiled css (no syntaxical errors)

What happens:

❌

e_modules\less\lib\less\index.js:23:26
    at Object.finish [as _finish] (path\node_modules\gulp-less\node_modules\less\lib\less\parser.js:666:28)
    at Object.tree.importVisitor.run (path\node_modules\gulp-less\node_modules\less\lib\less\import-visitor.js:34:22)
    at Object.Parser.parser.parse (path\node_modules\gulp-less\node_modules\less\lib\less\parser.js:675:22)
    at Object.less.render (path\node_modules\gulp-less\node_modules\less\lib\less\index.js:22:20)
    at Transform.transform [as _transform] (path\node_modules\gulp-less\index.js:36:10)
    at Transform._read (path\node_modules\gulp-less\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
    at Transform._write (path\node_modules\gulp-less\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:12)
    at doWrite (path\node_modules\gulp-less\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:238:10)

System: Win8.1x64

I have similar to this dominictarr/through#16 issue. Here is the test repo https://github.com/armed/gless-test where it can be reproduced by running gulp (nothing happens, but should create dist/css with css file).

Gulpfile from test repo:

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

gulp.task('default', function() {
  gulp.src(['client/css/**/*.less', '!client/css/includes/*.less'])
    .pipe(less().on('error', console.log))
    .pipe(gulp.dest('dist/css'));
});

It can be easily fixed by adding this.pause() before parser.parse(...) and self.resume() after self.emit('data', file) in gulp-less/index.js:

    //...
    delete opts.compress;
    this.pause();
    var parser = new less.Parser(opts);
    var str = file.contents.toString('utf8');
    parser.parse(str, function (err, tree) {
      if (err) return self.emit('error', err);
      file.contents = new Buffer(tree.toCSS(opts));
      file.path = gutil.replaceExtension(file.path, '.css');
      self.emit('data', file);
      self.resume();
    });
    //...

Tried this on node v0.10.24 and v0.11.10. Should I create PR or there is better solution?

When using gulp.watch, gulp-less throws errors everytime when it fails compile, which will terminate gulp process. It should be able to just output the error messages, but without throwing an error (or it can provide an option for users to determine).

I'm using the following code.

.transitions(...){
    @arg : ~`"@{arguments}".replace(/[\[\]]*/g, '')`;
    -webkit-transition: @arg;
       -moz-transition: @arg;
        -ms-transition: @arg;
         -o-transition: @arg;
            transition: @arg;
}

.transitions(opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;);

And it produces the following result.

-webkit-transition: opacity 0s ease-in 0s, max-height 1s linear, margin-bottom 0s linear;
-moz-transition: opacity 0s ease-in 0s, max-height 1s linear, margin-bottom 0s linear;
-ms-transition: opacity 0s ease-in 0s, max-height 1s linear, margin-bottom 0s linear;
-o-transition: opacity 0s ease-in 0s, max-height 1s linear, margin-bottom 0s linear;
transition: opacity 0s ease-in 0s, max-height 1s linear, margin-bottom 0s linear;

As you can see 0.3, 0.4 get rounded to 0 and 0.6 gets rounded to 1. I've tried it with less compiler directly and it works fine. the less compiler outputs as follows

-webkit-transition: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
  -moz-transition: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
  -ms-transition: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
  -o-transition: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;
  transition: opacity 0.3s ease-in 0.3s, max-height 0.6s linear, margin-bottom 0.4s linear;

I am new to gulp, so I may be doing something wrong, but I can't even get a simple example of gulp-less working.

stylesheets/app.less

@color: #00ff00;
body { color: @color; }

gulpfile.js

var gulp       = require('gulp'),
    less       = require('gulp-less');

 gulp.task('less', function() {
   gulp.src('./sylesheets/app.less')
     .pipe(less())
     .pipe(gulp.dest('./public/stylesheets'));
 });

results:

$ gulp less
[gulp] Using file /project_path/gulpfile.js
[gulp] Working directory changed to /project_path
[gulp] Running 'less'...
[gulp] Finished 'less' in 3.62 ms
$ cat public/stylesheets/app.css
cat: public/stylesheets/app.css: No such file or directory

Running lessc stylesheets/app.less public/stylesheets/app.css works as expected.

package.json dependencies:

   "devDependencies": {
     "gulp-util": "~2.2.9",
     "gulp": "~3.3.1",
     "gulp-browserify": "~0.2.4",
     "gulp-concat": "~2.1.7",
     "browserify": "~3.19.1",
     "browserify-shim": "~3.1.4",
     "gulp-less": "~1.1.7",
     "less": "~1.6.1"
   },

Happy to help troubleshoot if given some direction and provide any other info that would be helpful.

Using this config:

var less = require('gulp-less');
var path = require('path');

gulp.task('less', function () {
  gulp.files('./less/entrypoint.less')
    .pipe(less())
    .pipe(gulp.foler('./public/css'));
});

results in a file ./public/css/.css not ./public/css/entrypoint.css

Hi there,
I found a bug with the @import statement:

file css.less:

@import "variables_one";
@import "variables_two";
.main{
  border:1px solid blue;
}

file "variables_one":

.variables_one{
  border:1px solid green;
}

file "variables_two":

.variables_two{
  border:1px solid green;
}

exspected output:

.variables_one {
  border: 1px solid green;
}
.variables_two {
  border: 1px solid red;
}
.main {
  border: 1px solid blue;
}

BUT instead it ignores BOTH @import files!

gulp task:

gulp.task('less', function() {
  // Minify and copy all JavaScript (except vendor scripts)
  return gulp.src(['htdocs/styles/less/css.less'])
    .pipe(require('gulp-debug')())   // =====> NEEDS THIS LINE TO MAKE IT WORK !!
    .pipe(less({
      paths: ['htdocs/styles/less','htdocs/styles/less/lib']
    }))
    .pipe(gulp.dest('htdocs/build/css'));
});

it is fixed, if I add a
".pipe(require('gulp-debug')())"
just before
".pipe(less({ paths: ['htdocs/styles/less','htdocs/styles/less/lib']}))"
as suggested here:
#21

I don't know it this is as an issue or enhancement but I've attached a zip ball.

To reproduce:

1. unzip and npm install.
2. run gulp
3. Edit the @color variable in variables.less
4. Notice that main.less was not recompiled.

Let's say i have two less files, biz1.less, b.less. And biz1.less actually imports b.less as part of biz1.less's content.

After compiled the less files, only biz1.css is required for my application, since all the content in b.less was injected into biz1.css, right?

i have the code structure as following:

|-- src/
|   |-- biz/
|   |   `-- biz1
|   |       |-- css/
|   |            |-- biz1.less
|   |            `-- b.less
|   |       `-- js/
|   |   `-- biz2
|   |       |-- css/
|   |            |-- biz2.less
|   |            `-- c.less
|   |       `-- js/
|   `-- index.html

gulp.task('copycsss', function() {

       return gulp.src('src/biz/**/css/**/*')
        .pipe(less())
        .pipe(rename({
            extname: '.css'
        }))
        .pipe(gulp.dest('bin/biz/'));
});

Since i might i have multiple biz like above biz1, biz2, and each biz contains its own css folder.

By doing above gulp task, i found that the b.less and c.less were also compiled and copied into the dest which should be excluded from the copying process.

The main css in each biz has the file name same as its biz folder name just like biz1 has the main css called biz1.less, all the others should be excluded.

Is it possible to do such a thing? Thanks

Seems like there are some changes in using the API programmatically.

Would be nice to have some of the features of 1.5 though.

What I'm missing?

gulp.task('less',function(){
gulp.src('src/less/style.less')
.pipe(less({
paths: [ path.join('public/css', 'less', 'includes') ]
}))
.pipe(gulp.dest('public/css'));
})

It seems that gulp.files() and gulp.foler (netiher gulp.folder if it was a typo mistake) exists. Is there some up to date example ?
By the way, thanks for have made this plugin.

Is it possible to pass options like -x or --clean-css to less via gulp-less? If not, please implement these, and if it is possible, please document how to do it.

Right now, it looks like only options that actually take a value are supported.

UPDATE: Further, how should I specify a destination filename? By default gulp-less takes foo.less and creates foo.css, but if I am using -x or --clean-css I actually want to produce a foo.min.css instead.

gulp-sourcemaps/vinyl-sourcemaps-apply@1bee9f5

/path/node_modules/gulp-less/node_modules/vinyl-sourcemaps-apply/index.js:26
throw e;
^
Error: Source map to be applied is missing the "file" property

I am experiencing a problem with upgrading from version 1.3.2 of gulp-less.

I've set up a small repository here to try and capture the problem in a reproducible form. Basically, I have a watch task that starts a build task every time my LESS files change. Standard.

For version 1.3.2, any syntax errors in my LESS files cause the build task to print an error message to the console, which is what I want. But for version 1.3.3 and up, my build task does not even seem to run after a LESS syntax error is encountered. :(

From what I can tell, it is stemming from this commit.

It contains the fix for having the inline sourcemap on the same line as the content.

It should allow for inline sourcemaps to work with gulp-sourcemaps

Not end-of-world but FYI:

https://npmjs.org/package/gulp-less

ERROR: No README data found!

I am trying to use gulp-watch and gulp-less, and I want to use gulp-less to compile main.less when *.less changes.

Here is my folder structure.

app
├── images
├── index.html
├── scripts
├── styles
│   ├── base
│   ├── fonts
│   ├── main.less
│   └── modules
└── views

main.less

// base
@import 'base/variables';
@import 'base/scaffold';

// moduels
@import 'modules/utils';
@import 'modules/space';
@import 'modules/button';
@import 'modules/form';
@import 'modules/layout';
@import 'modules/list';
@import 'modules/nav';
@import 'modules/icon';
@import 'modules/image';

gulpfile.js

gulp.task('watch', function () {
  watch({
    glob: 'app/styles/**/*.less',
    read: false
  })
    .pipe(plumber())
    .pipe(less({
      paths: 'app/styles/',
      filename: './app/styles/main.less'
    }))
    .pipe(gulp.dest('app/styles/'))
    .pipe(connect.reload());
});

Note:
If I comment the read: false in watch function, it will throw error like this:

variable @color-black is undefined in file ~/projects/app/styles/base/scaffold.less line no. 18

It can watch file changes, as I can see [21:16:14] variables.less was changed in the console.
But there is no app/styles/main.css!

And here is my working version code.

gulp
  .src('app/styles/**/*.less', {read: false})
  .pipe(watch(function () {
    return gulp
      .src('app/styles/main.less')
      .pipe(less())
      .pipe(gulp.dest('app/styles/'))
      .pipe(connect.reload());  
}));

Although I can make it work with the above code, I want to know why my prev code do not work. Thanks.

Current master branch contains some stream error handling fixes, but version is still 1.1.1. Npm module v1.1.1 comes without this fixes.

:hover fails

a.k-link, a.k-link: hover {
            text-decoration: none;
        }

You are passing specific options to the LESS, not the whole config object given to gulp-less. For example, this means you aren't able to minify with YUICompress.

I have the following task in my gulpfile

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

gulp.task('style', [], function() {
  var less = gulp.src('src/main/frontend/style/less/style.less')
    .pipe(less())
    .pipe(gulp.dest('src/main/webapp/static/style/css'));

  return less;
});

When running gulp style I get
[17:48:50] Using gulpfile ~/workspace/myproject/gulpfile.js
[17:48:50] Starting 'style'...
[17:48:50] 'style' errored after 4.88 ms undefined is not a function

If I leave out the line .pipe(less()) the task completes and the file is copied to webapp directory normally as .less, which lead me to believe that something is wrong with gulp-less. The file also compiles nicely from the command line using lessc.

Is this a bug or am I doing something wrong?

I'm getting this error running this task:

gulp.task('less', function () {
  gulp.src('./**/*.less')
    .pipe(less())
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./dist/css'));
});

Here's the stack trace. Thank for any help.

Skipped data-uri embedding of /home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/test/data/data-uri-fail.png because its size (51KB) exceeds IE8-safe 32KB!

events.js:72
        throw er; // Unhandled 'error' event
              ^
[gulp] Error in plugin 'gulp-less': resource 'http://localhost:8081/test/browser/less/imports/urls2.less' gave this Error:
  Error: connect ECONNREFUSED
 in file /home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/test/browser/less/urls.less line no. 2
    at /home/djhell/dev/storeroom/client/node_modules/gulp-less/index.js:46:28
    at /home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/index.js:23:26
    at Object.finish [as _finish] (/home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/parser.js:666:28)
    at Object.subFinish [as _finish] (/home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/import-visitor.js:84:47)
    at Object.tree.importVisitor.run (/home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/import-visitor.js:34:22)
    at /home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/import-visitor.js:96:38
    at fileParsedFunc (/home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/parser.js:82:17)
    at /home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/parser.js:105:29
    at finish (/home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/parser.js:669:28)
    at Object.Parser.parser.parse (/home/djhell/dev/storeroom/client/node_modules/gulp-less/node_modules/less/lib/less/parser.js:677:24)

In the example below, notice that I have one parent file, 2 child files, and one grandchild file. The grandchild file should be imported twice because it is imported in 2 places in different selector contexts. That happens correctly using CLI.

Using gulp-less, the second instance is ignored. If there were a third, fourth, etc, they would be ignored, too, in gulp-less. Only the first is getting processed.

I think this is a bug since the behavior differs from CLI.

thanks!

test-main.less

.class-1 {
  #first {
  @import "test-child1.less";
  }
}
.class-2 {
  #second {
  @import "test-child2.less";
  }
}

test-child1.less

div {
  color: blue;
}
@import "test-grandchild.less";

test-child2.less

div {
  color: green;
}
@import "test-grandchild.less";

test-grandchild.less

p {
  color: red;
}

result of test-main.css when using CLI (correct)
$ lessc less/test-main.less css/test-main.css

.class-1 #first div {
  color: blue;
}
.class-1 #first p {
  color: red;
}
.class-2 #second div {
  color: green;
}
.class-2 #second p {
  color: red;
}

result of test-main.css when using gulp-less (incorrect)

.class-1 #first div {
  color: blue;
}
.class-1 #first p {
  color: red;
}
.class-2 #second div {
  color: green;
}

$ npm ls less
[email protected] /Users/sam.elwitt/Sites/IBM/p4sc/src
└─┬ [email protected]
  └── [email protected] 
$ npm ls gulp-less
[email protected] /Users/sam.elwitt/Sites/IBM/p4sc/src
└── [email protected] 

gulpfile.js

var gulp = require('gulp'), plugins = require('gulp-load-plugins')();

gulp.task('less', function() {
    return gulp.src(['less/test-main.less'])
            .pipe(plugins.less())
            .pipe(gulp.dest('css/test-main.css'));
});

I'll snip out a big portion of my task here.

//This works as expected
gulp.task("buildSprites", function(cb) {
  return gulp.src("" + iconImagePath + "**")
  .pipe(gulpif("*.png", gulp.dest(dest.images)))
  .pipe(gulpif("*.less", sendToThrough2()))
  .pipe(gulp.dest("./build/less"))
  .pipe(gulpif("matches/the/file.less", fileLogger()))  //Note here
  .pipe(less()) 
  .pipe(rename("" + config.cssFileName + ".css"))
  .pipe(gulp.dest(dest.css));
});

//This fails with call stack exceeded
gulp.task("buildSprites", function(cb) {
  return gulp.src("" + iconImagePath + "**")
  .pipe(gulpif("*.png", gulp.dest(dest.images)))
  .pipe(gulpif("*.less", sendToThrough2()))
  .pipe(gulp.dest("./build/less"))
  .pipe(gulpif("matches/the/file.less", less()))  //Called directly from gulpif 
  .pipe(rename("" + config.cssFileName + ".css"))
  .pipe(gulp.dest(dest.css));
});

The fileLogger() is just through2 with a logger on file.path, it doesn't do anything else. If I call that from gulpif and pipe the stream to less() it works as expected.

If I pipe it directly from gulpif to less() it fails.

Chrome shows empty source in linked source file.

gulp.src(cfg.less.src)
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(gulpif(args.min === 'yes', minifyCSS()))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest(_.template(cfg.less.dst, {
    lang: lang
  })))
  .pipe(connect.reload());

Hello,

Is there an option to output the name of the compiled files in the terminal log?

I tried passing { debug: true } but that's something completely different.

I hacked node_modules/gulp-less/index.js, added this line in line 72

gutil.log('[gulp-less] compiled ' + file.path);

And now I get the desired log entries such as:

[18:24:00] [gulp-less] compiled /Users/antoniobrandao/WEBROOT/site/css/team.css

But this hack obviously will vanish as soon as I make any update. And the rest of the team can't get it from NPM. Making a Fork just for this wouldn't make sense either.

So is there such option ? If not, could it be soon / one day ?

Thanks

Hi,

I'm just jumping the sourcemaps train.
I got it working for js, but I run into a problem with less.

Following the examples in the readme, the sourceMappingURL value is foo.css and not the expected foo.less. Am I missing something?

I am getting an empty css returned from less when I pass multiple glob patterns into src.

gulp.src(['client/styles/bootstrap/bootstrap.less', 'client/styles/*.less'])
    .pipe(less())
    .pipe(rename('app.css'))
    .pipe(gulp.dest('client/styles'));

If I remove the second glob client/styles/*.less it works. Nothing is printed to gulp indicating an error.

I have the following error:

    throw err
          ^

ReferenceError: cb is not defined
at parseLess (/Projects/chtijs/node_modules/gulp-less/index.js:11:33)

Can you merge this #12 et publish ?

For instance, this block of IE hack can't be compiled with gulp-less.

.bg-logo {
display: block;
max-width: 100%;
width: 100% \9;
height: auto;
margin: 0 auto;
}

Compile result：

.bg-logo{display:block;max-width:100%;height:auto;margin:0 auto}

I apologize if this question has already been.

Is there any way to make the error does not come out of standby process and does not contain unnecessary information (only what is shown in blue)?

For example, as is done in the gulp-csslint (Using .pipe(csslint.reporter());):

I'm trying to switch front grunt to gulp. Currently, my project uses grunt-usemin to compile my less to css and replace my link tags with the css.

Trying to do this same thing with gulp-usemin and gulp-less isn't working. I've tried debugging with node-inspector. I can tell that the files from the usemin html blocks are being passed to gulp-less, and gulp-less does not appear to be throwing any exceptions.

It seems the output of the less compilation isn't making its way back to the usemin task. I'm having trouble debugging any further.

Here's my gulp file:

var gulp = require('gulp')
    , concat = require('gulp-concat')
    , uglify = require('gulp-uglify')
    , usemin = require('gulp-usemin')
    , minifyHtml = require('gulp-minify-html')
    , minifyCss = require('gulp-minify-css')
    , less = require('gulp-less')
    , ngAnnotate = require('gulp-ng-annotate')
;



gulp.task('build', function() {
  gulp.src('./src/client/index.html')
    .pipe(usemin({  
      less: [less(), minifyCss(), 'concat'],
      //css: [minifyCss(), 'concat'],
      js: [ngAnnotate(), uglify()]
    }))
    .pipe(gulp.dest('build/client'));
});

Here's the respective html block

<!-- build:less assets/css/smokehouse.css -->
    <link rel="stylesheet/less" href="bower_components/bootstrap/less/bootstrap.less">
    <link rel="stylesheet/less" href="bower_components/font-awesome/less/font-awesome.less">
<!-- endbuild -->

Is there anyway to make gulp-less use an earlier version of less rather than the latest. I have a legacy bootstrap 2 app in which the less can only be compiled with [email protected].

I've been trying to track this down all day with no luck. I'm hoping someone may be able to point me in the right direction.

No matter what I do, gulp-less will only process 16 less files, then it will exit with no errors and without sending the stream 'end' event. I've tried deleting files to see if it's choking on a particular file, but no matter what files I feed it, it will always die after 16 files.

Here's the output:

± gulp compile-less --base-dir=/Users/brandon.konkle/code/sympoz-beta/craftsy-web --build-directory=. --build-final-name=test
[16:22:39] Using gulpfile ~/code/sympoz-beta/craftsy-web/src/build/js/gulpfile.js
[16:22:39] Starting 'compile-less'...
[16:22:39] [1] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/mixins.css]
[16:22:39] [2] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/cart.css]
[16:22:39] [3] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/classGallery.less]
[16:22:39] [4] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/classNew.less]
[16:22:39] [5] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/classes.less]
[16:22:40] [6] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/clp-redux.less]
[16:22:41] [7] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/columnal.less]
[16:22:41] [8] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/deal.less]
[16:22:41] [9] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/feedback.less]
[16:22:41] [10] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/fileupload.less]
[16:22:42] [11] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/filtersBar.less]
[16:22:42] [12] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/freetrial.less]
[16:22:42] [13] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/giftcard.less]
[16:22:42] [14] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/global.less]
[16:22:42] [15] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/home.less]
[16:22:42] [16] [/Users/brandon.konkle/code/sympoz-beta/craftsy-web/src/main/webapp/css/craftsy/homeroom.less]

And then it's back to the prompt.

Here's my gulp task:

var filelog = require("gulp-filelog");
var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var utils = require('./utils');

function getSource() {
    var args = utils.getArgs();
    var cssDir = args['base-dir'] + '/src/main/webapp/css';
    return cssDir + '/**/*.less';
}

/**
 * Take a plain stream or a watched stream, and compile the CSS
 */
function compile(stream) {
    var args = utils.getArgs();
    var production = (args.env === 'production');

    stream.pipe(plumber(function (err) {
        console.log('ERROR!', err.message);
    }));

    if (!production) {
        // Initialize sourcemaps
        stream.pipe(sourcemaps.init());
    }

    // Only compress the files if this is a production build
    stream.pipe(less({compress: production}));

    if (!production) {
        // Write the sourcemaps
        stream.pipe(sourcemaps.write());
    }

    // Write a log of each processed file to stdout
    stream.pipe(filelog());

    // Finally, output the files to the build directory
    stream.pipe(gulp.dest(args['build-directory'] + '/' + args['build-final-name'] + '/css'));

    stream.on('end', function() {
        console.log("Woo, I'm done!");
    });

    return stream;
}

gulp.task('compile-less', function() {
    return compile(gulp.src(getSource()));
});

gulp.task('watch-less', ['compile-less'], function() {
    gulp.watch(getSource(), function(event) {
        compile(gulp.src(event.path));
    });
});

I've tried to add {debug: true} to gulp.src, and the output from minimatch and glob definitely show the entire set of less files being picked up, not just the 16 that are output by gulp-filelog.

Also, I think it's odd that first couple of files that filelog report on end in a '.css', but the rest end in '.less'. They should all end in '.css', correct?

Here's my dependencies so you can see the versions I'm using:

"dependencies": {
    "gulp": "^3.8.8",
    "gulp-filelog": "^0.2.0",
    "gulp-less": "^1.3.6",
    "gulp-plumber": "^0.6.5",
    "gulp-sourcemaps": "^1.2.2",
    "gulp-util": "^3.0.1",
    "gulp-watch": "^1.0.5",
    "minimist": "^1.1.0",
    "requirejs": "^2.1.15"
  }

Thanks for any help you can provide!

I've notice from all the examples that at the end of the less task you do something like so

.pipe(gulp.dest('./public/css'))

I want to put all the files in a single css file, naturally I tried:

.pipe(gulp.dest('./public/main.css')) and it made a folder called that.

Any setting I'm missing here?

Hi,

When i have some syntax error in my less file, the plugin just throws an unhandled error. The less compiler shows what the error was so it would be nice if the error were caught and the error output in the console, so i can fix my less.

i'm also using it with the watch command, the whole script crashes on this error, and i have to manually start gulp again, which is a pita.

I set up a LESS task like so:

gulp.task('less', function () {
  gulp.src('./content/styles/less/*.less')
    .pipe(less())
    .on('error', gutil.log)
    .pipe(gulp.dest('./content/styles'));
});

and when I error, the output is:

[gulp] { plugin: 'gulp-less',
  showStack: undefined,
  name: 'Error',
  message: 'Unrecognised input',
  fileName: undefined,
  lineNumber: undefined }

What I expect from a LESS error is this (preferably with nice colors):

ParseError: Unrecognised input in somefile.less on line 4, column 1:
3 
4 {
5   position: 

Is this an issue with how gulp-less handles errors, or the way gulp-util outputs them, or the way I'm setting the .on('error', gutil.log) listener?

i'm watching less files to compile them on change
when i make some wrong less syntax, this plugin just crashes.
is it supposed to be so? isn't it better to handle this and print a warning or something?

Let's say i have two less files, a.less and b.less.

And within a.less, i have such import code:

@import "b.less"

Normally, it works fine. But sometimes i get error from this, error log as following:

vents.js:72
       throw er; // Unhandled 'error' event
             ^
ypeError: Cannot read property 'rules' of undefined
   at Object.tree.Import.eval (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\tree\import.js:115:56)
   at Object.tree.Ruleset.evalImports (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\tree\ruleset.js:165:40)
   at Object.tree.Import.eval (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\tree\import.js:117:21)
   at Object.tree.Ruleset.evalImports (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\tree\ruleset.js:165:40)
   at Object.tree.Import.eval (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\tree\import.js:117:21)
   at Object.tree.Ruleset.evalImports (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\tree\ruleset.js:165:40)
   at Object.tree.Ruleset.eval (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\tree\ruleset.js:73:21)
   at Object.toCSS (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\parser.js:575:46)
   at d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\index.js:26:54
   at Object.finish [as _finish] (d:\designEnv\datayeswork\cloud-ui\node_modules\gulp-less\node_modules\less\lib\less\parser.js:669:28)

How could i prevent this error? It's a bit annoying. Thanks!

I could definitely be doing this wrong (for one thing I got confused by the translation from hyphen-delimited to camelCase) but I tried passing

{
    sourceMap: true,
    sourceMapMapInline: true,
    sourceMapLessInline: true
}

as an option to gulp-less, but the "sourceMapLessInline" param does not seem to be taking effect - I do see the map data being appended inline to the generated CSS file but the LESS is not being added inline, as it would be when using lessc --source-map-less-inline --source-map-map-inline source.less destination.css

Currently, it is impossible to pass the globalVars or modifyVars options to gulp-less.
From what I have found, LESS passes the options argument from less.render to the less.Parser constructor (https://github.com/less/less.js/blob/c290c4/lib/less/index.js#L17) and the globalVars/modifyVars options are taken from the parser.parse call (https://github.com/less/less.js/blob/84407/lib/less/parser.js#L358-L359).
I am not sure if it's something gulp-less should adapt to, or if I should report it as an issue of less. Any comment would be appreciated.

Hi,
I run today to issue with version 1.2.2 my gulp is working fine with 1.2.1

path.js:360
        throw new TypeError('Arguments to path.join must be strings');
        ^
TypeError: Arguments to path.join must be strings
  at path.js:360:15
  at Array.filter (native)
  at Object.exports.join (path.js:358:36)
  at tryPathIndex (<path_to_app>/node_modules/gulp-less/node_modules/less/lib/less/index.js:223:37)
  at callback.type (<path_to_app>/node_modules/gulp-less/node_modules/less/lib/less/index.js:226:29)
  at Object.oncomplete (fs.js:107:15)

GULP

dirs=
  "src":"src"
  "dest":"build"
  "tmp":"tmp"

config =
  "less":
    "src": "#{dirs.src}/app/less/main.less"
    "dest": "#{dirs.dest}"
    "watch": "#{dirs.src}/app/**/*.less"
    "sprites": "#{dirs.src}/app/less/"

gulp.task 'LESS', ->
  gulp.src(config.less.src)
  # .pipe(recess())
  .pipe(less())
  .pipe(plumber())
  .pipe(autoprefixer(
      "last 2 version",
      "safari 5",
      "ie 8",
      "ie 9",
      "opera 12.1",
      "ios 6",
      "android 4"
    ))
  .pipe(gulpif(prod,minifycss()))
  .pipe(gulpif(prod, rename suffix: ".min"))
  .pipe(gulpif(prod, rev()))
  .pipe(gulp.dest(config.less.dest))

Importing a reference of bootstrap in its entirety results in cruft at the beginning of one's generated css:

@import (reference) "../bower_components/bootstrap/less/bootstrap";

The resulting css file should be empty.

I have tried this with grunt and it works as expected.

See sindresorhus/gulp-styl#2 and sindresorhus/gulp-styl@db68d79#diff-0730bb7c2e8f9ea2438b52e419dd86c9R33

Gulp plugins are meant to be small and focused. Let the user use the one they want.