Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Pointsgulp compileSass
Hi,
I have been following along with the Gulp Basics course here on Treehouse and I am currently on branch Stage3Video1. When I attempt to run gulp compileSass this is what my console returns:
treehouse-gulp-basics juliettetworsey$ gulp compileSass /Users/juliettetworsey/treehouse-gulp-basics/gulpfile.js:16 .pipe(concat('app.js')) ^
SyntaxError: Unexpected token . at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:413:25) at Object.Module._extensions..js (module.js:452:10) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Module.require (module.js:365:17) at require (module.js:384:17) at Liftoff.handleArguments (/usr/local/lib/node_modules/gulp/bin/gulp.js:116:3) at Liftoff.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:192:16) at module.exports (/usr/local/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)
What could be wrong? I have ran (and refreshed) the server on port 3000, but still there is no compiled Sass.
Thanks!
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsHi Pete,
For some reason there is no reply button for me to respond to your post response directly, so hopefully you'll see this.
Here is my gulpfile.js code:
'use strict';
var gulp = require('gulp'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), sass = require('gulp-sass');
gulp.task('concatScripts', function(){
return gulp.src([ 'js/jquery.js', 'js/sticky/jquery.sticky.js', 'js/main.js']);
.pipe(concat('app.js'))
.pipe(gulp.dest('js'));
});
gulp.task('minifyScripts', function(){ return gulp.src('js/app.js') .pipe(uglify()) .pipe(rename('app.min.js')) .pipe(gulp.dest('js'));
});
gulp.task('compileSass', function(){ gulp.src('scss/application.scss') .pipe(sass()) .pipe(gulp.dest('css'))
});
gulp.task('default', ['concatScripts'], function(){ console.log('This is the default task!'); });
I couldn't spot any typos, can you?
Thanks!
3 Answers
Pete Cass
16,656 PointsHey Juliette,
in your concat scripts task, on the line starting with return gulp.src you have a semi colon at the end of the line, if you remove this your gulp file should work.
Gulp was helping you out by pointing to an error on line 16, you can see this in the console statement. Often the error is in the line before what is stated.
treehouse-gulp-basics juliettetworsey$ gulp compileSass /Users/juliettetworsey/treehouse-gulp-basics/gulpfile.js:16
.pipe(concat('app.js')) ^
Hope this helps
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsYes, this does help Pete. Thanks! I was staring at this code for much longer than I would like to admit...lol..
But now I've run into another problem... When I try to compile Sass in my console it now returns this:
Juliettes-MBP:treehouse-gulp-basics juliettetworsey$ gulp comileSass [12:34:37] Using gulpfile ~/treehouse-gulp-basics/gulpfile.js [12:34:37] Task 'comileSass' is not in your gulpfile [12:34:37] Please check the documentation for proper gulpfile formatting
Now I'm really confused. I have this task in my gulpfile:
gulp.task('compileSass', function(){ gulp.src('scss/application.scss') .pipe(sass()) .pipe(gulp.dest('css'))
});
...and gulp-sass (version 2.0.4) is listed as a dependency in my package.json file.
Maybe I should just start over at the beginning?
Thanks for your help!
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsOk, here's an update: The strangest thing just happened. I stepped away from working on this for awhile, then went back and did exactly the same thing and this time compileSass worked when I ran it in the console!! I have no explanation for that...lol..
Pete Cass
16,656 PointsSometimes taking a break is the best approach. The reason it didn't work before is because you wrote comileSass instead of compileSass in the console. You were missing the P. Glad you got it working now, Gulp is really awesome and speeds stuff so much.
I've got a gulpfile i've been adding to here https://github.com/Petecass/flint. Feel free to checkout once you've finished with the gulp course.
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsNow don't I feel silly. Good lord....Yeppers.. You are so right. I guess that I was just tired. Good catch Pete!
I get it now...The speeding up of things, I mean...That is really exciting!
I will make it a point to check out your gulpfile on Github once I feel like I've got the grasp of it a bit more.
Thanks again:-)
Pete Cass
16,656 PointsPete Cass
16,656 PointsThe most likely cause is a syntax error in your gulpfile. It hints that something is wrong on line 16. Take a look there to see. Paste your gulpfile code up as well if you need more help.