compiling less

[dudo]

gulp.task('styles', ['clean'], function () {
  return gulp.src('./less/main.less')       // Return the stream
    .pipe($.less({}))                       // Compile Less files

shouldn't this be return gulp.src(paths.less)? and even then (I changed it myself), gulp doesn't seem to want to compile any of the .less files into skeleton.css.min... I'm confused. You've essentially built an assets pipeline, but the files don't seem to want to fall into the pipe.

[dstroot]

Some thoughts - but I am no expert ... although I play one on TV ;)

Here is my understanding of how this works with streams (again I not an expert):

/* -------------------------------------------------------------
By default, all gulp tasks run with maximum concurrency --
e.g. it launches all the tasks at once and waits for nothing.
If you want to create a series where tasks run in a particular
order, you need to do two things:

1. Give it a hint to tell it when the task is done. This can be
   done by using a callback or `return`ing the stream.

     // Takes in a callback so that gulp knows when it'll be done
     gulp.task('one', function(cb) {
       // do stuff -- async or otherwise
       cb(err); // if err is not null and not undefined, the orchestration will stop, and 'two' will not run
     });

     // Return the stream so that gulp knows when it'll be done
     gulp.task('one', function() {
       return gulp.src(['src/styles/app.less'])
         .pipe($.less({}))
         .pipe(gulp.dest('output/css/app.css'));
     });

2. Tell it which tasks depend on completion of other tasks.
   Dependent tasks are passed in as an array, task 'two'
   depends on 'one':

    gulp.task('two', ['one'], function() {
      // task 'one' is done now
    });

Docs:
https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md
--------------------------------------------------------------- */

So honestly I am not sure if return makes a difference in this context or not - by the time I go to load the web page to view it in my development env the files are all built.

You must be experiencing some type of less compilation error - but if so it should throw an error!?

Here is my current styles task:

gulp.task('styles', ['clean'], function () {
  gulp.src('./less/main.less')              // Return the stream
    .pipe($.less({}))                       // Compile Less files
    .pipe($.autoprefixer([                  // Autoprefix for target browsers
      'last 1 version',
      '> 1%'
    ], { cascade: true }))
    .pipe($.rename(pkg.name + '.css'))      // Rename to "packagename.css"
    .pipe(gulp.dest('./public/css'))        // Save CSS here
    .pipe($.rename({ suffix: '.min' }))     // Add .min suffix
    .pipe($.csso())                         // Minify CSS
    .pipe($.header(banner, { pkg : pkg }))  // Add banner
    .pipe($.size({ title: 'CSS:' }))        // What size are we at?
    .pipe(gulp.dest('./public/css'))        // Save minified CSS
    .pipe($.livereload());                  // Initiate a reload
});

[dudo]

oh, I'm not worried about return... I was talking about the path itself. you're grabbing ./less/main.less instead of the entire less directory. or am I missing something?

[dstroot]

Ah! Now I get it. Yes that is confusing.

1) I grab only ./less/main.less because that one file @imports in all the others. So that is the only file we need to compile.

2) However I have to watch all the files (paths.less) in case any one of them has changed so the we recompile everything.