0

I have a task like the following:

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'))
});

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: 

{"version":3,"sources":["site.css","../font/icon/css/fontawesome.css","site.less"...,"names":[],"mappings":"...","file":"site.css","sourceRoot":"../less"}

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 less directory - it is in the css directory. So when I load this up in dev tools, it is not found.

If I remove autoprefixer it all works fine, so I guess what I am seeing here is the fact that autoprefixer uses site.css for both source and destination file, so it considers there to be a mapping between them.

Based on some suggestions elsewhere, I tried adding calls to sourcemaps.write() then sourcemaps.init() in between less() and autoprefixer(), however this does not resolve the issue and, in fact adds an additional sourceMappingURL comment to the generated CSS.

Is there an accepted/better way to do this?

Based on comments from @seven-phases-max, I've changed the task up slightly:

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'))
});

Unfortunately the output seems exactly the same, I'm still getting site.css as the first source.

Chris O'Kelly
  • 1,863
  • 2
  • 18
  • 35
  • At the autoprefixer issue tracker they suggest you can't get any better with `gulp-autoprefixer `. Instead they recommend to use `gulp-postcss`, though I have no idea of how much improvement for your problem it can provide. – seven-phases-max Mar 23 '17 at 07:05
  • @seven-phases-max Oh OK thanks - where did you see that? According to `npm list` it looks like autoprefixer already uses postcss but can I use it directly in some other way? – Chris O'Kelly Mar 23 '17 at 07:16
  • `gulp-postcss` is alternative to `gulp-autoprefixer` (e.g. it's not about `autoprefixer` engine itself but about its `gulp` wrappers). – seven-phases-max Mar 23 '17 at 07:53
  • Unless I am misunderstanding how to set it up this does not seem to help, unfortunately – Chris O'Kelly Mar 23 '17 at 23:12

0 Answers0