Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,413 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....:-)

Hey Juliette,

Can you post your gulpfile.js?

5 Answers

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,413 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$

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,413 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,413 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:-)

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,413 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,413 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,249 Points

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

I did the same thing. :/