kogakure / gulp-tutorial

Code examples for my Gulp.js tutorial series.

Hi there 👋

About Me

I’m a Front-End Web Developer and Designer from ⚓ Hamburg, Germany. I love design and art, reading books, creating Sketchnotes, taking photos, and writing Haiku. See what I’m doing now.

gulp-tutorial's Issues

emit('end') doesn't actually end the stream, it just says "I'm done"

https://github.com/kogakure/gulp-tutorial/blob/master/gulp/util/handleErrors.js#L14

Calling this.end() looks to be a better option, but I'm not an expert.
http://www.bennadel.com/blog/2692-you-have-to-explicitly-end-streams-after-pipes-break-in-node-js.htm

scripts task .on('end', ...) not working

I find I need to use .on('finish', ...) which fires when the stream has finished writing.

http://nodejs.org/api/stream.html#stream_event_finish

Update?

Thank you so much for the gulp-tutorial.
First one I found that was actually useful.

One question though. The tutorial is from a couple of years ago. Has anything changed? Could you do an updated version?
I'm wondering about the versions you used. Almost all of them have new releases now. And I believe quite a lot of new plugins are available. What has changed in your workflow since then?

npm install failing

Fresh clone of this project gives me the following error on npm install. Afterwards multiple modules are missing. Any thoughts?

Rasmuss-iMac:jursdotme-jekyll rasmusjurs$ npm install
npm WARN engine [email protected]: wanted: {"node":">=0.10.0","npm":">=2.1.5"} (current: {"node":"0.10.36","npm":"1.4.28"})

> [email protected] install /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/watchify/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  SOLINK_MODULE(target) Release/.node: Finished
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
  SOLINK_MODULE(target) Release/fse.node: Finished

> [email protected] preinstall /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp.spritesmith/node_modules/spritesmith/node_modules/gmsmith
> gm -version || convert -version

sh: gm: command not found
sh: convert: command not found
npm WARN optional dep failed, continuing [email protected]

> [email protected] preinstall /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp.spritesmith/node_modules/spritesmith/node_modules/phantomjssmith
> phantomjs --version

sh: phantomjs: command not found
npm WARN optional dep failed, continuing [email protected]
npm WARN engine [email protected]: wanted: {"node":"0.8.x"} (current: {"node":"0.10.36","npm":"1.4.28"})

> [email protected] install /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp.spritesmith/node_modules/spritesmith/node_modules/canvassmith/node_modules/canvas
> node-gyp rebuild

./util/has_cairo_freetype.sh: line 4: pkg-config: command not found
gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:343:16)
gyp ERR! stack     at ChildProcess.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:820:12)
gyp ERR! System Darwin 14.0.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp.spritesmith/node_modules/spritesmith/node_modules/canvassmith/node_modules/canvas
gyp ERR! node -v v0.10.36
gyp ERR! node-gyp -v v1.0.1
gyp ERR! not ok 
npm WARN optional dep failed, continuing [email protected]
|
> [email protected] postinstall /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle
> node lib/install.js

  ✔ gifsicle pre-build test passed successfully


> [email protected] postinstall /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin
> node lib/install.js

  ✔ optipng pre-build test passed successfully

> [email protected] postinstall /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp-webp/node_modules/cwebp-bin
> node install.js

  ✔ cwebp pre-build test passed successfully

> [email protected] postinstall /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant/node_modules/pngquant-bin
> node lib/install.js

  ✔ pngquant pre-build test passed successfully

> [email protected] postinstall /Users/rasmusjurs/Desktop/jursdotme-jekyll/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin
> node lib/install.js

  ✔ jpegtran pre-build test passed successfully
npm ERR! EEXIST, open '/Users/rasmusjurs/.npm/d8f15c9f-adable-stream-1-0-33-package-tgz.lock'
File exists: /Users/rasmusjurs/.npm/d8f15c9f-adable-stream-1-0-33-package-tgz.lock
Move it away, and try again. 

npm ERR! System Darwin 14.0.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/rasmusjurs/Desktop/jursdotme-jekyll
npm ERR! node -v v0.10.36
npm ERR! npm -v 1.4.28
npm ERR! path /Users/rasmusjurs/.npm/d8f15c9f-adable-stream-1-0-33-package-tgz.lock
npm ERR! code EEXIST
npm ERR! errno 47
npm ERR! not ok code 0

browserify doesn't seem to watch

I've been reading through your tuto trying to make sense of it and see what I can take for my own project.
I can't see how you get browserify to watch for changes, nor where you tell browsersync to reload after rebuilding the changes.

It will watch if (global.isWatching)
https://github.com/kogakure/gulp-tutorial/blob/master/gulp/tasks/development/scripts.js#L49
but isWatching isn't set anywhere in this repository.

I guess browserSync.reload should be done in bundle https://github.com/kogakure/gulp-tutorial/blob/master/gulp/tasks/development/scripts.js#L32

Issues when running default workflow a second time

When running the default gulp task, there are no problems - but there is a warning:

Node#before is deprecated. Use Node#raws.before

Gulp continues watching for changes and the site seems to function normally.

If I cancel and run the same default gulp task again, there are multiple errors stating file/directory doesn't exist...

[16:38:16] 'images' errored after 850 ms
[16:38:16] Error: ENOENT: no such file or directory, open '/Users/OZARIN/Downloads/gulp-tutorial-master-2/build/assets/images/sprites/icon/twitter.png'

and...

[16:38:16] 'build' errored after 919 ms
[16:38:16] Error in plugin 'run-sequence(images)'
Message:
    ENOENT: no such file or directory, open '/Users/OZARIN/Downloads/gulp-tutorial-master-2/build/assets/images/sprites/icon/twitter.png'
Details:
    errno: -2
    code: ENOENT
    syscall: open
    path: /Users/OZARIN/Downloads/gulp-tutorial-master-2/build/assets/images/sprites/icon/twitter.png
Stack:
Error: ENOENT: no such file or directory, open '/Users/OZARIN/Downloads/gulp-tutorial-master-2/build/assets/images/sprites/icon/twitter.png'
Node#before is deprecated. Use Node#raws.before

Gulp then stops watching for changes and the localhost is unreachable.

However, this works normally if I delete the build folder and run gulp again.

Can you please advise?