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

JavaScript Gulp Basics Improving your Gulp Task Pipelines The Build and Development Pipeline

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Posted by Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Gulp build fails to create new dist folder

Hi, I am following along in the Treehouse Gulp Basics course and @ 5:12(ish) in Stage4Video3 I get an error returned in my console when I run gulp build and I am unable to re-create the dist folder (after deleting it).

This is what my console returns:

Juliettes-MBP:treehouse-gulp-basics juliettetworsey$ gulp build
[14:38:25] Using gulpfile ~/treehouse-gulp-basics/gulpfile.js
[14:38:25] Starting 'concatScripts'...
[14:38:25] Starting 'compileSass'...
[14:38:25] Finished 'compileSass' after 90 ms
[14:38:25] Finished 'concatScripts' after 106 ms
[14:38:25] Starting 'minifyScripts'...
[14:38:27] Finished 'minifyScripts' after 2.13 s
[14:38:27] Starting 'build'...
[14:38:27] 'build' errored after 460 μs
[14:38:27] Error: Invalid glob argument: css/application.css,js/app.min.js,index.html,img/**,fonts/**,[object Object]
    at Gulp.src (/Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/vinyl-fs/lib/src/index.js:20:11)
    at Gulp.<anonymous> (/Users/juliettetworsey/treehouse-gulp-basics/gulpfile.js:42:15)
    at module.exports (/Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at /Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/index.js:279:18
    at finish (/Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
    at /Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:52:4
    at f (/Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/node_modules/end-of-stream/node_modules/once/once.js:17:25)
    at DestroyableTransform.onend (/Users/juliettetworsey/treehouse-gulp-basics/node_modules/gulp/node_modules/orchestrator/node_modules/end-of-stream/index.js:31:18)

I have checked for typos, but I am unable to spot any at the moment.

Has anyone else had this issue?

....not sure what to do now....:-)

miikis
miikis
44,957 Points

Hey Juliette,

Can you post your gulpfile.js?

5 Answers

miikis
miikis
44,957 Points

You have a syntax error around line 42; it's your "build" task. Gulp.src accepts an array and an object as arguments but you included the object inside the array. It should look like this:

gulp.task("build", ['minifyScripts', 'compileSass'], function(){
  // This is the correct syntax: gulp.src(myArray, myObject)
  // You had this before: gulp.src(myArray)
  return gulp.src(['css/application.css', 'js/app.min.js', 'index.html', 'img/**', 'fonts/**'], {base: './'})

  .pipe(gulp.dest('dist'));
});
Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Thanks Mikis. That is correct, but for some reason now it's not running at all:

Juliettes-MBP:treehouse-gulp-basics juliettetworsey$ gulp build
/Users/juliettetworsey/treehouse-gulp-basics/gulpfile.js:48
});
  ^

SyntaxError: Unexpected end of input
    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)
Juliettes-MBP:treehouse-gulp-basics juliettetworsey$
miikis
miikis
44,957 Points

It looks like you added an unnecessary semi-colon at the end of that line (Line 48, apparently). You probably forgot about .pipe(gulp.dest('dist'));. The semi-colon goes after the entire statement.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Hi Mikis! Thanks for the quick response.

Here is my gulpfile.js:

"use strict";

var gulp = require('gulp'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename'),
    sass = require('gulp-sass'),
    maps = require('gulp-sourcemaps');

gulp.task("concatScripts", function() {
    return gulp.src([
        'js/jquery.js',
        'js/sticky/jquery.sticky.js',
        'js/main.js'
        ])
    .pipe(maps.init())
    .pipe(concat('app.js'))
    .pipe(maps.write('./'))
    .pipe(gulp.dest('js'));
});

gulp.task("minifyScripts", ["concatScripts"], function() {
  return gulp.src("js/app.js")
    .pipe(uglify())
    .pipe(rename('app.min.js'))
    .pipe(gulp.dest('js'));
});

gulp.task('compileSass', function() {
  return gulp.src("scss/application.scss")
      .pipe(maps.init())
      .pipe(sass())
      .pipe(maps.write('./'))
      .pipe(gulp.dest('css'));
});

gulp.task('watchSass', function() {
  gulp.watch('scss/**/*.scss', ['compileSass']);
});

gulp.task("build", ['minifyScripts', 'compileSass'], function(){
  return gulp.src(['css/application.css', 'js/app.min.js', 'index.html', 'img/**', 'fonts/**', {base: './'}])

  .pipe(gulp.dest('dist'));
});

gulp.task("default", ["build"]);
Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

One more thing-

I actually have two ** after img/ and fonts/ like so:' img/', 'fonts/ in my build task , so I am not sure why that failed to appear in my copy/paste above.

There are also other typos and omissions in my copy/paste above that are not in my actual code. Let me try to post it again...

Thanks:-)

miikis
miikis
44,957 Points

No problem.

And yeah I saw that and fixed it for you. Here's a good thread on proper syntax for posting stuff in the forum. Actually, here's a better one.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Thanks again. I'll have to read those threads. That's (posting code here that is not forked from the Workspaces console/app) yet another thing that I have yet to learn fully/correctly.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

"It looks like you added an unnecessary semi-colon at the end of that line (Line 48, apparently). You probably forgot about .pipe(gulp.dest('dist'));. The semi-colon goes after the entire statement."

Yes!!!!!! That's what did it. Whoosh.

Thanks so much!

Mark Warren
Mark Warren
19,252 Points
Mark Warren
Mark Warren
19,252 Points

Include the closing ] at the end of the glob just after "fonts/", so "fonts/],

I did the same thing. :/