Closed maxxscho closed 9 years ago
Same issue here. I have a whole bunch of CSS files being generated, and the last one to make it through the pipe always throws that error, no matter what the relevant stylesheet contains (even if there is no content in it).
Are you sure there's no sourcemap comment in the end of the file?
I'm getting the error with sourcemaps on and off. Every version of autoprefixer below 2.0.0 works fine, with sourcemaps too. But 2.0.0 doesn't work. I'm using gulp-ruby-sass FYI.
@maxxscho Please post your gulpfile and version of gulp-ruby-sass used.
// @robwierzbowski
My Gulpfile (WIP) https://github.com/maxxscho/bigbang/blob/develop/Gulpfile.js and her my package.json https://github.com/maxxscho/bigbang/blob/develop/package.json
@maxxscho the method signature you're using for gulp-autoprefixer is wrong. It expects an object, not a string: https://github.com/sindresorhus/gulp-autoprefixer#autoprefixeroptions
@sindresorhus Ok, I thought strings works too (don't know why :D ). I've fixed this but I'm still getting the same error with gulp-autoprefixer 2.0.0
Here is my updated Gulpfile:
/* Modules
------------------------------------- */
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
prefix = require('gulp-autoprefixer');
/* Paths
------------------------------------- */
var assets = 'assets/',
jsDir = assets + 'js/',
srcDir = assets + 'src/',
scssSrcDir = srcDir + 'scss/',
jsSrcDir = srcDir + 'js/',
bowerDir = assets + 'bower_components/';
/* Sass Task
------------------------------------- */
gulp.task('sass', function () {
gulp.src(scssSrcDir + 'style.scss')
.pipe(sass({loadPath: [bowerDir, scssSrcDir]}))
.pipe(prefix({
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'],
cascade: false
}))
.pipe(gulp.dest('.'));
});
/* Watch Task
------------------------------------- */
gulp.task('watch', function () {
gulp.watch(scssSrcDir + '**/*.scss', ['sass']);
});
/* Default Task
------------------------------------- */
gulp.task('default', ['sass', 'watch']);
and here's a snippet of package.json
"devDependencies": {
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.0.0",
"gulp-ruby-sass": "^0.7.1"
}
}
I don't see sourcemaps turned off in that sass task. Search the issue queue for info on how to turn sourcemaps off.
On Wednesday, November 19, 2014, Markus Schober notifications@github.com wrote:
@sindresorhus https://github.com/sindresorhus Ok, I thought strings works too (don't know why :D ). I've fixed this but I'm still getting the same error with gulp-autoprefixer 2.0.0
Here is my updated Gulpfile:
/* Modules ------------------------------------- */ var gulp = require('gulp'), sass = require('gulp-ruby-sass'), prefix = require('gulp-autoprefixer');
/* Paths ------------------------------------- */ var assets = 'assets/', jsDir = assets + 'js/', srcDir = assets + 'src/', scssSrcDir = srcDir + 'scss/', jsSrcDir = srcDir + 'js/', bowerDir = assets + 'bower_components/';
/* Sass Task ------------------------------------- */ gulp.task('sass', function () { gulp.src(scssSrcDir + 'style.scss') .pipe(sass({loadPath: [bowerDir, scssSrcDir]})) .pipe(prefix({ browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'], cascade: false })) .pipe(gulp.dest('.')); });
/* Watch Task ------------------------------------- _/ gulp.task('watch', function () { gulp.watch(scssSrcDir + '_/.scss', ['sass']); });
/* Default Task ------------------------------------- */ gulp.task('default', ['sass', 'watch']);
and here's a snippet of package.json
"devDependencies": { "gulp": "^3.8.10", "gulp-autoprefixer": "^2.0.0", "gulp-ruby-sass": "^0.7.1" } }
— Reply to this email directly or view it on GitHub https://github.com/sindresorhus/gulp-autoprefixer/issues/20#issuecomment-63615476 .
Rob Wierzbowski @robwierzbowski http://twitter.com/#!/robwierzbowski http://github.com/robwierzbowski http://robwierzbowski.com
@robwierzbowski It doesn't matter if sourcemaps are on or off - see first post
I am getting this error as well. I created a simple project just to test this. Nothing but this task, one simple selector in scss file. No other files or tasks. I created a basic gulp task block, taken off a web site:
gulp.task('styles', function() {
return gulp.src('src/sass/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'ie 8', 'ie 9', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
It throws the error:
charizard:gulptests stevel$ gulp styles
[13:35:00] Using gulpfile ~/Desktop/gulptests/gulpfile.js
[13:35:00] Starting 'styles'...
[13:35:00] gulp-ruby-sass: directory
[13:35:00] gulp-ruby-sass: write main.css
[13:35:00] gulp-ruby-sass: write main.css.map
events.js:72
throw er; // Unhandled 'error' event
^
Error: /Users/stevel/Desktop/gulptests/main.css.map:3:1: Unknown word
If I comment out the pipe to autoprefixer, it works fine. Ruby Sass 3.4.9, OS 10.10.1
@maxxscho (OT) Can you please post a screenshot or diagram of your folder structure? I'm interested in the was you have things set up, and have been looking for a better way. Thanks.
The original error says that the problem is in a map file:
Error: /Users/myfolderstructure/style.css.map:3:1: Unknown word
I'm guessing that you may not have turned maps off correctly, due to a bug with dargs in 0.7.1. There's info in the issue queue about it. Can you make sure that gulp-ruby-sass is not generating sourcemaps (either by setting the sourcemap hack in 0.7.1 or by installing 1.0.0-alpha and setting sourcemap: false
) and see if that fixes your issue?
If you install the 1.0 alpha check the new readme, it's now a gulp source adapter.
I can't seem to turn off the sass sourcemaps. How do I do this?
Search the gulp-ruby-sass issue queue. @ultcombo has documented it on many issues.
@robwierzbowski wouldn't updating to gulp-ruby-sass@1.0.0-alpha
fix the issue?
Alternatively, if anyone is looking for an workaround to work with gulp-ruby-sass 0.7.x, see this comment. Btw, I've first seen the 'sourcemap=none': true
hackaround in @milesj's comment, so props to him as well.
@smlombardi My folder structur:
assets
css
js
images
src
js
images
scss
otherfiles
otherfiles
That's my base structure but in most projects I use variants of this structure.
@robwierzbowski I've turned off sourcemaps and no maps file has been generated and the error is still there. It's the same as @smlombardi … if I remove the pipe with autoprefixer it works well.
@maxxscho How did you turn off sourcemaps?
@heikki .pipe(sass({sourcemap: false}))
I turned it off for testing but for development I want sourcemaps enabled. But as I mentioned before, the only thing that helps in the moment is to remove autoprefixer. Maybe there's an error in gulp-ruby-sass, I don't know… :|
I've gotten it to work like this, FWIW:
gulp.task('styles', function() {
return gulp.src('app/sass/main.scss')
.pipe(sass({
style: 'expanded',
"sourcemap=none": true //hack to allow autoprefixer to work
}))
.pipe(autoprefixer({
browsers: ['last 2 version', 'ie 8', 'ie 9', 'ios 6', 'android 4']
}))
.pipe(gulp.dest('app/css')) // <- non-minified to app folder
.pipe(minifycss())
.pipe(gulp.dest('build/css')) // <- minimized to build folder
.pipe(reload({stream:true}))
.pipe(notify({ message: 'Styles task complete' }));
});
@maxxscho @heikki Like I said above, that does not turn off sourcemaps in 0.7.1. Read the comments from myself and @UltCombo for pointers to the fix.
The error is with Autoprefixer trying to parse sourcemaps. That's obvious with the error message — it mentions the sourcemap file as the erroring file.
@lombardi-gux Glad you got it to work. Note the hack is to turn off Sass sourcemaps, not anything related to autoprefixer directly really. You could also use gulp-filter to remove the sourcemaps from the stream, or better yet upgrade to gulp-ruby-sass 1.0.0-alpha which doesn't have any of these problems as @UltCombo says. :+1:
@maxxscho See example above how to disable sourcemaps in gulp-ruby-sass 0.7.1. Same thing is explained in linked StackOverflow question in the beginning of this thread.
I can confirm that after switching to gulp-ruby-sass 1.0 alpha this problem is gone, and sourcemap integration with autoprefixer seems to work nicely.
:smiley:
@davidtheclark This might be a noob question, but how do I get npm to install the alpha?
npm i gulp-ruby-sass@1.0.0-alpha
Well, that did not work at all. Installing 1.0 alpha now throws the error
[12:43:18] Starting 'styles'...
[12:43:18] 'styles' errored after 4.24 ms
[12:43:18] TypeError: Arguments to path.join must be strings
at path.js:360:15
Nothing else changed from above.
Usage is different for 1.0: you're going to have to change your task to match the instructions in the new readme: https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0
Not sure if I've got it correct (e.g. what does sourceRoot
point to?), but it still throws the "unknown word error"
gulp.task('styles', function() {
return sass('app/sass/main.scss', { sourcemap: true })
.on('error', function (err) {
console.error('Error', err.message);
})
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/source'
}))
.pipe(autoprefixer({
browsers: ['last 2 version', 'ios 6', 'android 4']
}))
.pipe(gulp.dest('app/css')) // <- non-minified to app folder
.pipe(minifycss())
.pipe(gulp.dest('build/css')) // <- minimized to build folder
.pipe(reload({stream:true})) // <- for browsersync, inject new css
.pipe(notify({ message: 'Styles task complete' }));
});
error msg:
staryu:gulptests stevelombardi$ gulp styles
[12:57:00] Using gulpfile ~/Documents/gulptests/gulpfile.js
[12:57:00] Starting 'styles'...
events.js:72
throw er; // Unhandled 'error' event
^
Error: /Users/stevelombardi/Documents/gulptests/maps/main.css.map:1:14: Unknown word
I put sourcemaps after autoprefixer and it seems to work now...
gulp.task('styles', function() {
var filter = gulpfilter('*.map');
return sass('app/sass/main.scss', { sourcemap: true })
.on('error', function (err) {
console.error('Error', err.message);
})
.pipe(autoprefixer({
browsers: ['last 2 version', 'ios 6', 'android 4']
}))
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/source'
}))
.pipe(gulp.dest('app/css')) // <- non-minified to app folder
.pipe(filter)
.pipe(minifycss())
.pipe(gulp.dest('build/css')) // <- minimized to build folder
.pipe(reload({stream:true})) // <- for browsersync, inject new css
.pipe(notify({ message: 'Styles task complete' }));
});
I used gulp-filter to prevent the map files from going to build folder.
I still don't understand /sourceRoot
, though....
Correct, sourcemaps get printed out at the very end (if you want them). The gulp-sourcemap readme has more info.
Rob Wierzbowski @robwierzbowski http://twitter.com/#!/robwierzbowski http://github.com/robwierzbowski http://robwierzbowski.com
On Mon, Nov 24, 2014 at 1:20 PM, Steve Lombardi notifications@github.com wrote:
I put sourcemaps after autoprefixer and it seems to work now...
gulp.task('styles', function() { return sass('app/sass/main.scss', { sourcemap: true }) .on('error', function (err) { console.error('Error', err.message); }) .pipe(autoprefixer({ browsers: ['last 2 version', 'ios 6', 'android 4'] })) .pipe(sourcemaps.write('maps', { includeContent: false, sourceRoot: '/source' })) .pipe(gulp.dest('app/css')) // <- non-minified to app folder .pipe(minifycss()) .pipe(gulp.dest('build/css')) // <- minimized to build folder .pipe(reload({stream:true})) // <- for browsersync, inject new css .pipe(notify({ message: 'Styles task complete' })); });
— Reply to this email directly or view it on GitHub https://github.com/sindresorhus/gulp-autoprefixer/issues/20#issuecomment-64238511 .
Of course, the way I just had it broke the refreshing in Browsersync, so to fix it I had to move it up in the sequence. This had the effect of breaking the sourcemaps again.
So I had to re-order things and use a filter, in case anyone runs into this. Not sure if this is a best practice...
gulp.task('styles', function() {
return sass('app/sass/main.scss', { sourcemap: true })
.pipe(plumber())
.pipe(autoprefixer({
browsers: ['last 2 version', 'ios 6', 'android 4']
}))
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/source'
}))
.pipe(gulp.dest('app/css'))
.pipe(filter('**/*.css'))
.pipe(reload({stream:true}))
.pipe(notify({ message: 'Styles task complete' }));
});
You could try writing maps after the reload. I think that should still work, but maybe not.
gulp.task('styles', function() {
return sass('app/sass/main.scss', { sourcemap: true })
.pipe(plumber())
.pipe(autoprefixer({
browsers: ['last 2 version', 'ios 6', 'android 4']
}))
.pipe(gulp.dest('app/css'))
.pipe(reload({stream:true}))
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/source'
}))
.pipe(notify({ message: 'Styles task complete' }));
});
@kevinSuttle Can you copy and paste the error?
@robwierzbowski I uninstalled and reinstalled. Fixed. ¯(°.°)/¯
:+1:
Actually, I must have reconfigured something, because this is back again. It's choking on the maps. Wish I could just not have them generated at all.
❯ gulp styles
[10:07:49] Using gulpfile ~/Code/Bluemix.Header/gulpfile.js
[10:07:49] Starting 'styles'...
[10:07:49] gulp-ruby-sass: directory
[10:07:49] gulp-ruby-sass: write bluemix-global.css
write bluemix-global.css.map
[10:07:49] gulp-ruby-sass: write header.css
write header.css.map
events.js:72
throw er; // Unhandled 'error' event
^
/Users/kevinsuttle/Code/Bluemix.Header/bluemix-global.css.map:3:1: Unknown word
"version": 3,
"mappings": "AAKA,IAA2B;EAC1B,WAAW,EAAE,0LAA0L;EACvM,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,GAAG;;ACRjB,CAA0B;EACzB,0BAA0B,EAAE,QAAQ;EACpC,mBAAmB,EAAE,IAAI;;AA+B1B,CAA0B;EACzB,eAAe,EAAE,IAAI;EAErB,mBAAmB,EAAE,KAAK;;AChC3B,CAAE;EAAE,UAAU,EAAE,UAAU;;AAM1B,IAAK;EACJ,MAAM,EAAE,IAAI;EACZ,gBAAgB,ECVL,OAAO;;ADanB,yBAGC;EAFA,gBAAgB,EAAE,YAAY;EAC9B,YAAY,EAAE,YAAY",
^
"sources": ["../utils/_bluemix-fonts.scss","../utils/_bluemix-variables.scss","../bluemix-global.scss","../utils/_bluemix-colors.scss"],
at Input._classProps.error.value (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/node_modules/postcss/lib/input.js:57:15)
at Parser._classProps.unknownWord.value (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/node_modules/postcss/lib/parser.js:366:22)
at Parser._classProps.decl.value (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/node_modules/postcss/lib/parser.js:228:18)
at Parser._classProps.word.value (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/node_modules/postcss/lib/parser.js:167:16)
at Parser._classProps.loop.value (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/node_modules/postcss/lib/parser.js:46:20)
at Function.module.exports [as parse] (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/node_modules/postcss/lib/parse.js:11:10)
at PostCSS._classProps.process.value (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/node_modules/postcss/lib/postcss.js:63:28)
at Autoprefixer.process (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/lib/autoprefixer.js:65:31)
at DestroyableTransform._transform (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/index.js:26:33)
at DestroyableTransform.Transform._read (/Users/kevinsuttle/Code/Bluemix.Header/node_modules/gulp-autoprefixer/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
gulp task
gulp.task('styles', function () {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('public/css'))
.pipe(browserSync.reload({stream: true}));
});
This has been working for me:
gulp.task('styles', function() {
return sass('app/sass/main.scss', { sourcemap: true })
.pipe(plumber())
.pipe(autoprefixer({
browsers: ['last 2 version', 'ios 6', 'android 4']
}))
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/source'
}))
.pipe(gulp.dest('app/css'))
.pipe(filter('**/*.css'))
.pipe(reload({stream:true}))
.pipe(notify({ message: 'Styles task complete' }));
});
Thanks. I got it working by installing the 1.0.0 alpha. Like you, my browser-sync live injecting is still broken, so that didn't fix it.
gulp.task('styles', function () {
return sass('sass/header.scss', {sourcemap: false})
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('public/css/'))
.pipe(browserSync.reload({stream: true}));
});
using the task I posted, along with gulp filter
worked for me, injection and all
Good to know. Thanks!
@lombardi-gux Your solution works very well. Thank you.
Offtopic: Is it better to have a external map file or is it better to have the map "inline" at the end of the stylesheet?
With external map file you have to serve the map file for your browser to see it. Inline it's "just there".
With maps pointing to external sources, you can edit the source files in your browser if you have it set up correctly. If you're just using the sources as reference, inlined sources "just work" and you don't need to worry about pointing the maps to the correct paths on disk which can get confusing.
So, if you're using the sources as reference, the "just works" option is inlining maps and sources into the result file. Just make sure you don't generate or strip them out before serving, because they'll be big.
Well, as long as map file is on the server where it's supposed to be (which it will be in most cases), it also "just works". I prefer the separate file. Then I generate a version of my CSS with no maps for the final build.
On Dec 4, 2014, at 10:25 AM, Rob Wierzbowski notifications@github.com<mailto:notifications@github.com> wrote:
With external map file you have to serve the map file for your browser to see it. Inline it's "just there".
With maps pointing to external sources, you can edit the source files in your browser if you have it set up correctly. If you're just using the sources as reference, inlined sources "just work" and you don't need to worry about pointing the maps to the correct paths on disk which can get confusing.
So, if you're using the sources as reference, the "just works" option is inlining maps and sources into the result file. Just make sure you don't generate or strip them out before serving, because they'll be big.
— Reply to this email directly or view it on GitHubhttps://github.com/sindresorhus/gulp-autoprefixer/issues/20#issuecomment-65647869.
Ok, thanks!
Hey, I'm trying to get Autoprefixer to run with Ruby-Sass. I read all your replies and copied @lombardi-gux solution. Well, console says:
[13:57:35] Starting 'sass'...
[13:57:35] Finished 'sass' after 325 ms
But the task isn't executing Autoprefixer. My gulpfile.js
looks like this at the moment:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
filter = require('gulp-filter'),
plumber = require('gulp-plumber'),
server = require('gulp-webserver'),
watch = require('gulp-watch');
/*
Compile SASS files
-----------------------------------------------*/
gulp.task('sass', function() {
return sass('site/_sass/site.scss', { noCache: true, sourcemap: true })
.pipe(plumber())
.pipe(autoprefixer({
browsers: ['last 2 version']
}))
.pipe(gulp.dest('site/css'))
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/source'
}))
});
/*
Watch for changes
-----------------------------------------------*/
gulp.task('watch', function() {
// Changes inside `_sass` dir execute the SASS compile task
gulp.watch('site/_sass/**/*.scss', ['sass']);
});
EDIT: Forget to mention that the CSS has no content either.
Where should I add sourcemaps.init() in 1.0.0-alpha recipe?
gulp-ruby-sass does it itself, I'll add a note to the new documentation.
watch task was only compiling changed files before, but with 1.0.0-alpha recipe all sass files are compiled even a singe sass file is changed.
My current plan is to try and get Sass caching to work, not to use changed / other iterative build plugins. If you check on the 1.0 PR that's still an unchecked item on TODO.
Error when set sourcemapPath: '.' in 1.0.0-alpha recipe.
There is no sourcemapPath in 1.0.0-alpha. Please read the 1.0 sourcemapping recipes.
@visualcookie Please post results. I'd love to use sourcemaps, but with autoprefixer killing them off, I'm fine without.
I'm going crazy. I've been reading but my knowledge is short.
npm -v gulp-ruby-sass --> 1.4.3
gulpfile.js
// Sass Compiling
gulp.task('sass', function() {
return sass('src/scss/main.scss')
.pipe(plumber())
.pipe(sass({ style: 'expanded', sourcemap: true }))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'],
cascade: false
}))
.pipe(gulp.dest(dest + 'css'))
.pipe(connect.reload())
.pipe(notify({ message: 'Sass task completed' }));
});
$ gulp sass --verbose OUTPUT
[05:30:56] Starting 'sass'...
[05:30:56] gulp-ruby-sass: Running command: sass --sourcemap=none src/scss/main.scss /var/folders/vz/sxt9fr5176qb7jrw49yz5f880000gn/T/gulp-ruby-sass/main.css
[05:30:56] 'sass' errored after 36 ms Arguments to path.join must be strings
[05:30:57] Finished 'scripts' after 69 ms
[05:30:57] gulp-ruby-sass stderr: OptionParser::NeedlessArgument: needless argument: --sourcemap=none
Use --trace for backtrace.
¿What am I doing wrong?
@thewinger 1.4.3
is your npm version, not gulp-ruby-sass's btw. But judging by the code sample, looks like you're on a gulp-ruby-sass 1.0 alpha release.
And the issue is rather apparent, you have sass()
twice in your pipeline -- gulp-ruby-sass 1.0 replaces gulp.src()
and emits already compiled css so you shouldn't be piping to sass()
again. See the docs' examples.
Hey, I'm using gulp-ruby-sass and if I add gulp-autoprefixer, I get the following error
With sourcemaps and without sourcemaps.
All versions under 2.0.0 are working fine.