{"action":"created","issue":{"url":"https://api.github.com/repos/BlessCSS/gulp-bless/issues/33","repository_url":"https://api.github.com/repos/BlessCSS/gulp-bless","labels_url":"https://api.github.com/repos/BlessCSS/gulp-bless/issues/33/labels{/name}","comments_url":"https://api.github.com/repos/BlessCSS/gulp-bless/issues/33/comments","events_url":"https://api.github.com/repos/BlessCSS/gulp-bless/issues/33/events","html_url":"https://github.com/BlessCSS/gulp-bless/issues/33","id":178870492,"number":33,"title":"Chrome raise `Failed to parse SourceMap` when I add `bless()` to gulp task","user":{"login":"leomao10","id":198821,"avatar_url":"https://avatars.githubusercontent.com/u/198821?v=3","gravatar_id":"","url":"https://api.github.com/users/leomao10","html_url":"https://github.com/leomao10","followers_url":"https://api.github.com/users/leomao10/followers","following_url":"https://api.github.com/users/leomao10/following{/other_user}","gists_url":"https://api.github.com/users/leomao10/gists{/gist_id}","starred_url":"https://api.github.com/users/leomao10/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/leomao10/subscriptions","organizations_url":"https://api.github.com/users/leomao10/orgs","repos_url":"https://api.github.com/users/leomao10/repos","events_url":"https://api.github.com/users/leomao10/events{/privacy}","received_events_url":"https://api.github.com/users/leomao10/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-09-23T12:59:11Z","updated_at":"2016-09-28T23:37:08Z","closed_at":null,"body":"Hi There,\r\n\r\nWhen I tried to apply `bless` in our gulp task, we found that Chrome raise following error:\r\n```\r\nFailed to parse SourceMap: http://localhost:7001/app/maps/index.css.map\r\n```\r\n\r\nI tried to compare the difference between the source file it generated before and after gulp task and found that in origin file, source file format looks like this:\r\n```json\r\n{\r\n  \"version\":3,\r\n  \"file\":\"index.css\",\r\n  \"sources\":[\"index.css\"],\r\n  \"mappings\": \"mapping string\",\r\n  \"sourceRoot\":\"/source/\",\r\n  \"sourcesContent\":[\"source_content\"]\r\n}\r\n```\r\nChrome do not complain for this format.\r\n\r\nAnd source file generate after I added `bless()` looks like this:\r\n```json\r\n{\r\n  \"version\":3,\r\n  \"file\":\"index.css\",\r\n  \"sources\":[\"index.css\"],\r\n  \"mappings\": {\r\n    \"version\":3,\r\n    \"sources\":[\"full_path/index.css\"],\r\n    \"names\":[],\r\n    \"mappings\":\"mapping string\",\r\n    \"sourcesContent\":[\"source_content\"]\r\n  },\r\n  \"sourceRoot\":\"/source/\",\r\n  \"sourcesContent\":[]\r\n}\r\n```\r\nNow, Chrome complain that it can't parse SourceMap even thought it is a valid json file. \r\n\r\nNot sure if it is because we did not use `gulp-bless` correctly. Here is the gulp task we use, and the version of `gulp bless` we use is \"3.1.0\":\r\n```javascript\r\n'use strict';\r\n\r\nvar path = require('path');\r\nvar gulp = require('gulp');\r\nvar conf = require('./conf');\r\nvar bless = require('gulp-bless');\r\n\r\nvar browserSync = require('browser-sync');\r\n\r\nvar $ = require('gulp-load-plugins')();\r\n\r\nvar wiredep = require('wiredep').stream;\r\nvar _ = require('lodash');\r\n\r\ngulp.task('styles', function () {\r\n  var lessOptions = {\r\n    options: [\r\n      'bower_components',\r\n      path.join(conf.paths.src, '/app')\r\n    ]\r\n  };\r\n\r\n  var injectFiles = gulp.src([\r\n    path.join(conf.paths.src, '/app/**/*.less'),\r\n    path.join(conf.paths.src, '/fonts/*.less'),\r\n    path.join('!' + conf.paths.src, '/app/index.less')\r\n  ], { read: false });\r\n\r\n  var injectOptions = {\r\n    transform: function(filePath) {\r\n      filePath = filePath.replace(conf.paths.src + '/app/', '');\r\n      return '@import \"' + filePath + '\";';\r\n    },\r\n    starttag: '// injector',\r\n    endtag: '// endinjector',\r\n    addRootSlash: false\r\n  };\r\n\r\n\r\n  return gulp.src([\r\n    path.join(conf.paths.src, '/app/index.less')\r\n  ])\r\n    .pipe($.inject(injectFiles, injectOptions))\r\n    .pipe(wiredep(_.extend({}, conf.wiredep)))\r\n    .pipe($.sourcemaps.init())\r\n    .pipe($.less(lessOptions)).on('error', conf.errorHandler('Less'))\r\n    .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))\r\n    .pipe(bless())\r\n    .pipe($.sourcemaps.write('maps'))\r\n    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')))\r\n    .pipe(browserSync.reload({ stream: true }));\r\n```\r\nIt would be really great if you can help to have a look and see how we can fix this issue.\r\n\r\nThank you in advance\r\n"},"comment":{"url":"https://api.github.com/repos/BlessCSS/gulp-bless/issues/comments/250332320","html_url":"https://github.com/BlessCSS/gulp-bless/issues/33#issuecomment-250332320","issue_url":"https://api.github.com/repos/BlessCSS/gulp-bless/issues/33","id":250332320,"user":{"login":"alvinlin123","id":787449,"avatar_url":"https://avatars.githubusercontent.com/u/787449?v=3","gravatar_id":"","url":"https://api.github.com/users/alvinlin123","html_url":"https://github.com/alvinlin123","followers_url":"https://api.github.com/users/alvinlin123/followers","following_url":"https://api.github.com/users/alvinlin123/following{/other_user}","gists_url":"https://api.github.com/users/alvinlin123/gists{/gist_id}","starred_url":"https://api.github.com/users/alvinlin123/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alvinlin123/subscriptions","organizations_url":"https://api.github.com/users/alvinlin123/orgs","repos_url":"https://api.github.com/users/alvinlin123/repos","events_url":"https://api.github.com/users/alvinlin123/events{/privacy}","received_events_url":"https://api.github.com/users/alvinlin123/received_events","type":"User","site_admin":false},"created_at":"2016-09-28T23:37:08Z","updated_at":"2016-09-28T23:37:08Z","body":"I may be talking nonsense here but from my brief research the mapping file produced by gulp-bless seems to have the wrong `mappings` values, it looks the plugin embedded a map inside the `mappings` field. I suspect the function [addSourceMap](https://github.com/BlessCSS/gulp-bless/blob/master/index.js#L56-L65) is passing in the wrong second argument?\r\n\r\nI think we probably need to call the `applySourceMap` like\r\n```\r\nvar map = result.maps[blessOutputIndex]; //this is already a valid mapping JSON \r\n map['file'] = fileToAddTo.relative;\r\n applySourcemap(fileToAddTo, map);\r\n```\r\n\r\nI'm still fairly new to source mapping, but above is my suspicion based on some research :)"}}
{"actor":{"display_login":"alvinlin123"}}