Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Source Maps being written twice #1386

Closed
kalenjohnson opened this issue Mar 16, 2015 · 16 comments
Closed

Source Maps being written twice #1386

kalenjohnson opened this issue Mar 16, 2015 · 16 comments
Labels
bug

Comments

@kalenjohnson
Copy link
Contributor

https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022

I just confirmed with a fresh Sage install that the source maps are being written directly into the main.css file as well as the main.map.css file.

Diffing a project that's not having the issue, the only difference in the gulpfile.js is this:

<   gulp.watch(['bower.json'], ['wiredep']);

---
>   gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);

Doesn't seem connected, since it's in the watch task
@stueynet
Copy link

Confirmed

@retlehs retlehs added the bug label Mar 18, 2015
@retlehs
Copy link
Member

retlehs commented Mar 18, 2015

trying to debug. disabling pleeease's minification makes the sourcemap work as expected:

      .pipe($.pleeease, {
        minifier: false,
        autoprefixer: {
          browsers: [
            'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4',
            'opera 12'
          ]
        }
      })

@stueynet
Copy link

UPDATE: Not fixed. Same issue as slobich below

@slobich
Copy link

slobich commented Mar 18, 2015

disabling pleeease's minification doesn't fix the issue for me. it does change the way source maps work. before the source maps referenced only the first line of the main.css. now they reference the .less files but the line numbers and in some cases even the .less files are off. IE: if i add background-color: red; to <body> in _global.less the source maps points me to grid.less:43 and the source map still get's compiled in main.css in the sourceMappingURL as base64 encode.

@thebatz
Copy link

thebatz commented Mar 18, 2015

Not fixed. Same issue as slobich above!

@retlehs
Copy link
Member

retlehs commented Mar 18, 2015

switching to pleeease 3.2.0 works for me. add the following to your package.json's devDependencies:

    "pleeease": "3.2.0",

example of full package.json:

{
  "name": "sage",
  "version": "8.1.0",
  "author": "Ben Word <[email protected]>",
  "homepage": "https://roots.io/sage/",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git://github.com/roots/sage.git"
  },
  "bugs": {
    "url": "https://github.com/roots/sage/issues"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "http://opensource.org/licenses/MIT"
    }
  ],
  "scripts": {
    "build": "bower install && gulp",
    "jshint": "gulp jshint",
    "jscs": "jscs gulpfile.js assets/scripts/*.js"
  },
  "engines": {
    "node": ">= 0.12.0",
    "npm": ">=2.1.5"
  },
  "devDependencies": {
    "pleeease": "3.2.0",
    "asset-builder": "^1.0.1",
    "browser-sync": "^2.0.1",
    "del": "^1.1.1",
    "gulp": "^3.8.10",
    "gulp-changed": "^1.1.0",
    "gulp-concat": "^2.3.4",
    "gulp-flatten": "0.0.4",
    "gulp-if": "^1.2.5",
    "gulp-imagemin": "^2.0.0",
    "gulp-jshint": "^1.8.4",
    "gulp-less": "^3.0.1",
    "gulp-load-plugins": "^0.8.0",
    "gulp-pleeease": "^1.1.0",
    "gulp-plumber": "^1.0.0",
    "gulp-rename": "^1.2.0",
    "gulp-rev": "^3.0.0",
    "gulp-sass": "^1.2.4",
    "gulp-sourcemaps": "^1.1.1",
    "gulp-uglify": "^1.0.1",
    "imagemin-pngcrush": "^4.0.0",
    "jshint-stylish": "^1.0.0",
    "lazypipe": "^0.2.2",
    "merge-stream": "^0.1.7",
    "traverse": "^0.6.6",
    "wiredep": "^2.1.0",
    "yargs": "^3.2.1"
  }
}

@stueynet
Copy link

Do you still have minifier: false,? Just updating pleeease din't fix it on my end. Actually neither works for me at all. A few elements map to the right place but for the most part its basically random.

If I don't have minifier: false, within gulp it actually just says every class is from font-awesome.css which i installed via bower.

@retlehs
Copy link
Member

retlehs commented Mar 18, 2015

no, i don't — stock gulpfile. just to confirm, you ran npm install after making the change to package.json?

@stueynet
Copy link

Yup. When that did nothing I also ran npm update.

@stueynet
Copy link

Just to be a bit more verbose...

On a plain vanilla sage install, I get main.css as the source of all styles. To reproduce:

Install WP
add define('WP_ENV', 'development'); to wp-config.php
Pull Sage
npm install and bower install
activate theme
add body{background: black} to _global.less
run gulp
view site
inspect body
source shows main.css:1

@kalenjohnson
Copy link
Contributor Author

@stueynet I wouldn't run npm update, I would delete the node_modules folder and run npm install again.

So along with your instructions, you need to add "pleeease": "3.2.0", to package.json, above "gulp-pleeease": "^1.1.0",, before running npm install

@slobich
Copy link

slobich commented Mar 18, 2015

working for me. but it didn't work with npm install or npm update. i had to manually delete node_modules folder (and i deleted dist folder as well) and then run npm install. tried it on two local sites. one with Sage 8.1.0 and one with 8.0.1 and it's working on both. and it's fixed both issues: source map compiled in main.css and source map wrong line/file reference.

@slobich
Copy link

slobich commented Mar 18, 2015

just saw @kalenjohnson comment. so yes... i did it like he recommends. first deleted node_modules and then run npm install and it worked for me.

@stueynet
Copy link

Yup confirmed. Sorry about my ignorance. First delete node modules and then npm install works.

retlehs added a commit that referenced this issue Mar 18, 2015
@retlehs
Temporary sourcemaps fix - Ref #1386
e63fdaf
@retlehs retlehs mentioned this issue Mar 18, 2015
Merged
@psaac
Copy link

psaac commented Mar 21, 2015

As stueynet stated, First delete node_modules and then run nom install worked perfectly !

@BrunoFenzl
Copy link

confirmed that fix works. Delete node_modules first.

@retlehs retlehs closed this as completed Mar 23, 2015
austinpray added a commit to austinpray/sage that referenced this issue Mar 31, 2015
@austinpray
Removes gulp-pleeease dependency
71a6472 
This gulp plugin was more trouble than it was worth.

ref roots#1386
ref https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022/1
austinpray added a commit to austinpray/sage that referenced this issue Mar 31, 2015
@austinpray
Removes gulp-pleeease dependency
350dcc3 
This gulp plugin was more trouble than it was worth.

ref roots#1386
ref https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022/1
@austinpray austinpray mentioned this issue Mar 31, 2015
Merged
austinpray added a commit to austinpray/sage that referenced this issue Mar 31, 2015
@austinpray
Removes gulp-pleeease dependency
bb18042 
This gulp plugin was more trouble than it was worth.

ref roots#1386
ref https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022/1
austinpray added a commit to austinpray/sage that referenced this issue Mar 31, 2015
@austinpray
Removes gulp-pleeease dependency
c09410c 
This gulp plugin was more trouble than it was worth.

ref roots#1386
ref https://discourse.roots.io/t/sourcemaps-no-longer-working-as-expected-with-sage-update/3022/1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@retlehs @stueynet @BrunoFenzl @kalenjohnson @slobich @thebatz @psaac