kogakure / gulp-tutorial Goto Github PK
View Code? Open in Web Editor NEWCode examples for my Gulp.js tutorial series.
Home Page: https://www.stefanimhoff.de/gulp-tutorial-1-intro-setup/
Code examples for my Gulp.js tutorial series.
Home Page: https://www.stefanimhoff.de/gulp-tutorial-1-intro-setup/
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?
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
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?
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
I find I need to use .on('finish', ...) which fires when the stream has finished writing.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.