title: Gulp LESS + autoprefix + sourcemaps frustration
body: <p>I have a task like the following:</p>
  
  <pre><code>var gulp = require('gulp'),
      plugins = require('gulp-load-plugins')({ camelize: true });
  
  gulp.task('styles-compile', function() {
      return gulp.src(['less/site.less',
                  'less/special-*.less',
                  'less/editor-styles.less'])
          .pipe(plugins.sourcemaps.init())
          .pipe(plugins.less())
          .pipe(plugins.autoprefixer('last 15 versions', 'ie 8', 'ios 6', 'android 4'))
          .pipe(plugins.sourcemaps.write('.', {sourceRoot: '../less', includeContent: false}))
          .pipe(gulp.dest('css'))
  });
  </code></pre>
  
  <p>And I just seem to be unable to configure it to get sourcemaps working.
  This is the closest I get to a working version - the only issue is that the generated sourcemap includes the file it is for in it's sources list - eg for site.css.map I get: </p>
  
  <pre><code>{"version":3,"sources":["site.css","../font/icon/css/fontawesome.css","site.less"...,"names":[],"mappings":"...","file":"site.css","sourceRoot":"../less"}
  </code></pre>
  
  <p>For one, I'm fairly sure that there is no need for the destination file itself (site.css) to appear in the sources list, but for another, it does not appear in the <code>less</code> directory - it is in the css directory. So when I load this up in dev tools, it is not found.</p>
  
  <p>If I remove autoprefixer it all works fine, so I guess what I am seeing here is the fact that autoprefixer uses <code>site.css</code> for both source and destination file, so it considers there to be a mapping between them.</p>
  
  <p>Based on some suggestions elsewhere, I tried adding calls to <code>sourcemaps.write()</code> then <code>sourcemaps.init()</code> in between <code>less()</code> and <code>autoprefixer()</code>, however this does not resolve the issue and, in fact adds an additional sourceMappingURL comment to the generated CSS.</p>
  
  <p>Is there an accepted/better way to do this?</p>
  
  <p>Based on comments from @seven-phases-max, I've changed the task up slightly:</p>
  
  <pre><code>var gulp = require('gulp'),
      plugins = require('gulp-load-plugins')({ camelize: true }),
      autoprefixer = require('autoprefixer');
  gulp.task('styles-compile', function() {
      return gulp.src(['less/site.less',
                  'less/special-*.less',
                  'less/editor-styles.less'])
          .pipe(plugins.sourcemaps.init())
          .pipe(plugins.less())
          .pipe(plugins.postcss([autoprefixer]))
          .pipe(plugins.sourcemaps.write('.', {sourceRoot: '../less', includeContent: false}))
          .pipe(gulp.dest('css'))
  });
  </code></pre>
  
  <p>Unfortunately the output seems exactly the same, I'm still getting site.css as the first source.</p>