shakyshane / jekyll-gulp-sass-browser-sync Goto Github PK
View Code? Open in Web Editor NEWA starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync
A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync
Hey guys,
Just trying to install this nifty little plugin following DevTips video:
https://www.youtube.com/watch?v=nY4kQssg3lw&index=5&list=PLqGj3iMvMa4KeBN2krBtcO3U90_7SOl-A
I get an error after:
The main error seems to be:
(node) child_process: options.customFds option is deprecated. Use options.stdio instead.
Can anyone help here ?
I'm having an issue when I try to npm install a new version of this, or run gulp
on an existing version of this repo.
Has anyone anyone tried this on El Capitan? Not sure if that is the issue, but it's the only thing I can think of.
Does anyone have the solution for this error
Dependency Error: Yikes! It looks like you don't have pygments or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- pygments' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
Liquid Exception: pygments in /Users/abhirajlamba/Desktop/jekyll-gulp-sass-browser-sync-master/_posts/2014-04-20-welcome-to-jekyll.markdown
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------
pygments
[20:16:11] Using gulpfile ~\Desktop\hard\master\gulpfile.js
[20:16:11] Starting 'sass'...
[20:16:11] Starting 'jekyll-build'...
[20:16:11] Starting 'watch'...
[20:16:11] Finished 'watch' after 15 ms
events.js:154
throw er; // Unhandled 'error' event
^
Error: spawn jekyll ENOENT
at exports._errnoException (util.js:856:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:474:9)
at process._tickCallback (node.js:388:17)
at Function.Module.runMain (module.js:449:11)
at startup (node.js:139:18)
at node.js:999:3
Ok, I have a big problem !
When I launch "gulp" ,
The "sass", "jekyll-build" and "watch" tasks start, but then, gulp seems to block on Auto-regeneration: disabled. Use --watch to enable.
I don't understand what's happening so please help me ! ; )
Thanks !
How can I insert script on the index header.
I trying to use font awesome cdn but I can't insert the cdn script on the header.
thank you
When i create a folder assets inside _site folder, then i put some images and fonts in there, and the i run the gulp command, the images and font that i put are disapear. Anybody please help me??
Executing gulp command hangs after
[09:58:06] Starting 'sass'...
[09:58:06] Starting 'jekyll-build'...
[09:58:06] Starting 'watch'...
[09:58:07] Finished 'watch' after 217 ms
PS <path> Configuration file: <path>/_config.yml
Source: <path>
Destination: <path>_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.966 seconds.
Auto-regeneration: disabled. Use --watch to enable.
_config.yml
permalink: /posts/:title
index.html
<a href="{{ post.url }}">{{ post.title }}</a>
The IP set by browser-sync is valid, but Jekyll (?) replaces the IP address/port combo with localhost
, which 404s.
Example
<a href="http://0.0.0.0:3002/posts/the-right-questions-to-ask-mobile-first-deniers">
click => resolves to:
http://localhost/posts/the-right-questions-to-ask-mobile-first-deniers
Have anyone found a solution for the following error?
Thank you in advance.
[22:09:59] Using gulpfile ~/Desktop/jekyll-gulp-sass-browser-sync-master/gulpfile.js
[22:09:59] Starting 'sass'...
[22:09:59] Starting 'jekyll-build'...
[22:09:59] Starting 'watch'...
[22:09:59] Finished 'watch' after 16 ms
events.js:141
throw er; // Unhandled 'error' event
^
Error: spawn jekyll ENOENT
at exports._errnoException (util.js:870:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:442:9)
at process._tickCallback (node.js:356:17)
at Function.Module.runMain (module.js:443:11)
at startup (node.js:139:18)
at node.js:968:3
This is what I ended up with after tweaking. It doesn't compile main.scss into css in the assets/css folder or the _site/assets/css/folder. Not sure where the error could possibly be. The watcher works but it always finishes and says 0 files changed.
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: ['css'],
onError: browserSync.notify
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/assets/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css'));
});
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jade/*.jade', ['jade']);
});
Hi im new at this and im getting this error, any help?
Thank you in advance :-D
[12:08:47] Using gulpfile ~\Desktop\jekyll-gulp-sass-browser-sync-master\jekyll-gulp-sass-browser-sync-master\gulpfile.js
[12:08:47] Starting 'sass'...
[12:08:47] Starting 'jekyll-build'...
[12:08:47] Starting 'watch'...
[12:08:47] Finished 'watch' after 15 ms
events.js:160
throw er; // Unhandled 'error' event
^
Error: spawn jekyll.bat ENOENT
at exports._errnoException (util.js:1026:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
Hi,
On linux mint I run $gulp in project folder and get this ReferenceError: Promise is not defined
in node_modules/postcss/lib/lazy-result.js:157
Any suggestions?
To simplify / make this a little more feature rich, you might be interested in this recipe for Jekyll and gulp-intermediate: https://github.com/robwierzbowski/gulp-intermediate/blob/master/recipes.md#using-gulp-intermediate-directly
Feel free to close after you take a look, whether you decide to use or not.
When i use gulp deploy command, i got this messages 'Command failed: git rev-list --pretty=raw --max-count=1' and show me a tons of options below it. Anyone can help me on how to resolve this problem please?
the browserSync(...)
pattern has been replaced by browserSync.init(...)
pretty minor thing and pretty easy to fix, just want to make sure you guys are aware of it. if you npm install browsersync
it will give you a version which doesn't support the old pattern.
Hi what node versjon to USE? Sass dont compile or jade using v5 or v4. Is IT recommended to USE 0.12?
I'm using windows 10 and already installed all preparations, but I got this error:
Liquid Exception: No such file or directory - python C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/pygments.rb-0.6.3/lib/pygments/mentos.py in D:/wamp/www/jekyll-gulp-sass-browser-sync-master/_posts/2014-04-20-welcome-to-jekyll.markdown
when I run command 'gulp' in my directory, anyone can help me?
Is anyone else having problems watching/compiling main.scss?
Nothing happens after I edit main.scss and I get this error: invalid top-level expression main.scss 1
I also see that main.scss is in a directory called _sass but the gulpfile.js has "gulp.src('_scss/main.scss')"
I'm having an issue ... Has anyone anyone had the same problem?
[22:38:52] Using gulpfile ~/Desktop/jekyll-gulp-sass-browser-sync-master/gulpfile.js
[22:38:52] Starting 'sass'...
[22:38:52] Starting 'jekyll-build'...
[22:38:52] Starting 'watch'...
[22:38:52] Finished 'watch' after 12 ms
[22:38:52] Finished 'sass' after 116 ms
Configuration file: /Users/Francesco/Desktop/jekyll-gulp-sass-browser-sync-master/_config.yml
Source: /Users/Francesco/Desktop/jekyll-gulp-sass-browser-sync-master
Destination: /Users/Francesco/Desktop/jekyll-gulp-sass-browser-sync-master/_site
Incremental build: disabled. Enable with --incremental
Generating...
Dependency Error: Yikes! It looks like you don't have redcarpet or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- redcarpet' If you run into trouble, you can find helpful resources at http://jekyllrb.com/help/!
Conversion error: Jekyll::Converters::Markdown encountered an error while converting '_posts/2014-04-20-welcome-to-jekyll.markdown':
redcarpet
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------
redcarpet
[22:38:53] 'jekyll-build' errored after 379 ms
This may not be an issue, but more of question:
When you run jekyll build
from a fresh install (jekyll new myblog
), it's already processing sass. Won't sass be run by both gulp and jekyll when starting the server?
Whenever I (re)run gulp, css doesn't automatically get applied. Hitting save solves it but still, it would be great if it's automatic.
would you want gulp watch to watch all .html files in the root instead of just index.html?
something like this:
gulp.watch(['*.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
instead of this:
gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
Love this configuration BTW!
Hi, I can't wait to use this project! I'm running Windows 8 and there is a build failure when I try to npm install. I updated Sass about a week ago, and updated rubygems today from an outdated version 2.2, but the problem still persists, I would love if someone can guide me in the right direction. Thanks!
6345 error Windows_NT 6.3.9600
6346 error argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
6347 error node v0.12.4
6348 error npm v3.1.3
6349 error code ELIFECYCLE
6350 error [email protected] install: `node build.js`
6350 error Exit status 1
6351 error Failed at the [email protected] install script 'node build.js'.
6351 error This is most likely a problem with the node-sass package,
6351 error not with npm itself.
6351 error Tell the author that this fails on your system:
6351 error node build.js
6351 error You can get their info via:
6351 error npm owner ls node-sass
6351 error There is likely additional logging output above.
6352 verbose exit [ 1, true ]
npm WARN package.json [email protected] No repository field
Everything else seems to be working though — this runs beautifully.
I'm looking at line 30 in gulpfile.js, see https://github.com/shakyShane/jekyll-gulp-sass-browser-sync/blob/master/gulpfile.js#L30
How can you be sure that the 'sass' task is executed before 'jekyll-build'?
It would be awesome to also have gulp-gh-pages in here. This would be the complete package.
Hello, how to send the only main.css file to the _site folder? Right now I got in _site/assets/css a lot of sass files.
This is link to my gulpfile.js.
Also I've been wondering if I can send *.js files from assets into one bundle.js?
Hope that anyone can help me :)
Hi,
After doing all the installation work, i tried running gulp but the browser opens and shows Cannot GET /
_Site folder has only CSS files.
System : Windows 7
Could someone please explain what the purpose of the duplicate destination for the css task is?
.pipe(gulp.dest('_site/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('css'));
What benefit is there of copying files to ./css for 'future jekyll builds' as well as directly to the _site/css directory?
$ gulp
[19:16:51] Using gulpfile c:\Users\Mahlu\Desktop\i\gulpfile.js
[19:16:51] Starting 'sass'...
[19:16:51] Starting 'jekyll-build'...
[19:16:51] Starting 'watch'...
[19:16:51] Finished 'watch' after 14 ms
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn jekyll ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
I have tried your script on Mac and it works fine. At work I have to use Windows and my setup is RubyInstaller 1.9.3-p545 with Node 0.10.26.
I get the following error, which seems related to the child process. Any idea what goes wrong?
[gulp] Using gulpfile c:\Users\<user>\Repositories\<projectname>\gulpfile.js
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 4.71 ms
[gulp] Starting 'jekyll-build'...
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 8.96 ms
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)
Hi ShakyShane love the jekyll gulp sass browser sync plugin so brilliant i used it to build my site but one little question, do you know to do the post values for a contact form, i am trying to use a contact finding it so hard to grab the post variables.
Micah
Would this project add min css/js automation?
thanks!
I'm attempting to use Bourbon and Neat in this project. However, I seem to be running into an error when I run Gulp. Heres whats happening:
Error
Error: _scss/main.scss
Error: File to import not found or unreadable: bourbon
gulpfile.js
var bourbon = require("node-bourbon").includePaths;
var neat = require("node-neat").includePaths;
main.scss
@import "reset";
@import "syntax";
@import "bourbon";
@import "neat";
Hello,
I want to add folder with html files which next I want to use with AJAX calls. The only thing I can do is adding these files directly to the project's folder (next to the index.html). I'm guessing I need to do sth with browserSync but I don't know how.
You can see in gulp task watch I've tried to add folder ajax with html files but I can't use them next with ajax call.
My gulpfile.js is:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var cp = require('child_process');
var pug = require('gulp-pug');
var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
var messages = {
jekyllBuild: 'Running: $ jekyll build'
};
/**
/**
/**
/**
/*
I'm trying to Gulp stuff
*/
gulp.task('pug', function(){
return gulp.src('_pugfiles/*.pug')
.pipe(pug())
.pipe(gulp.dest('_includes'));
});
/**
/**
gulp
will compile the sass,Hello when launching the command " gulp " start all tasks but when you open the browser I get this error : Cannot GET /
I do not know how to solve .
Work on a Linux platform : linux mint
So like every windows user trying to get this to work I really need help on this on. How can I get this to work? Lets start at the begin. I Install Ruby+RubyGems, DevKit, Pyrhon, Note.js and all the other things. Everything go's fine until gulp. I get a lot of errors on npm install and gulp just does not work. Is there no one that got it working? Can you please post one step by step guide? I have been doing this for 10 hours can't take it anymore.!
When I run 'gulp', it completes but never shows the
Configuration file: C:/PATH/././_config.yml
Source: C:/PATH/./###
Destination: C:/PATH/././_site
Generating...
done.
part. I can still get it to build by running 'jekyll build' but the gulp file doesn't seem to run it.
Running Windows 8.1
Edit: Also, I had to use the
return cp.exec('jekyll', ['build'], {stdio: 'inherit'}).on('close', done);
solution to get 'gulp' to run without error
I'm done everything according to instructions, but when I deploy command Gulp on my command prompt it shows me NO GULPFILE FOUND.... Can anyone tell me the solution for this?
I have grunt installed in my system and I think it may be a problem. I using windows 7.
i have no idea whats the problem [15:51:32] Using gulpfile D:\DjiJ\Documents\Web Design\jekyll-gulp-sass-browser-sync-master\gulpfile.js
[15:51:32] Starting 'sass'...
[15:51:33] Starting 'jekyll-build'...
[15:51:33] Starting 'watch'...
[15:51:33] Finished 'watch' after 43 ms
[15:51:33] Finished 'sass' after 450 ms
Configuration file: D:/DjiJ/Documents/Web Design/jekyll-gulp-sass-browser-sync-master/_config.yml
Source: D:/DjiJ/Documents/Web Design/jekyll-gulp-sass-browser-sync-master
Destination: D:/DjiJ/Documents/Web Design/jekyll-gulp-sass-browser-sync-master/_site
Incremental build: disabled. Enable with --incremental
Generating...
Liquid Exception: No such file or directory - python C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/pygments.rb-0.6.3/lib/pygments/mentos.py in D:/DjiJ/Documents/Web Design/jekyll-gulp-sass-browser-sync-master/_posts/2014-04-20-welcome-to-jekyll.markdown
done in 0.234 seconds.
Auto-regeneration: disabled. Use --watch to enable.
[15:51:34] Finished 'jekyll-build' after 1.69 s
[15:51:34] Starting 'browser-sync'...
[15:51:34] Finished 'browser-sync' after 268 ms
[15:51:34] Starting 'default'...
[15:51:34] Finished 'default' after 70 μs
whatever changes i make in the main.scss file in _scss does not reflect anything on the jekyll site(localhost:3000). there is no error shown. also, i think the jekyll site opened by gulp is not what it should look like,
any idea on how to solve this issue.
Hi i am having a issue with jekyll, with this error message:
[20:16:39] Using gulpfile ~/Desktop/micahkwaka.co.uk/gulpfile.js
[20:16:39] Starting 'sass'...
[20:16:39] Starting 'jekyll-build'...
[20:16:39] Starting 'watch'...
[20:16:39] Finished 'watch' after 111 ms
[20:16:39] 'jekyll-build' errored after 135 ms
[20:16:39] Error: 127
at formatError (/usr/local/lib/node_modules/gulp/bin/gulp.js:169:10)
at Gulp. (/usr/local/lib/node_modules/gulp/bin/gulp.js:195:15)
at emitOne (events.js:77:13)
at Gulp.emit (events.js:169:7)
at Gulp.Orchestrator._emitTaskDone (/Users/micahkwaka/Desktop/micahkwaka.co.uk/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
at /Users/micahkwaka/Desktop/micahkwaka.co.uk/node_modules/gulp/node_modules/orchestrator/index.js:275:23
at finish (/Users/micahkwaka/Desktop/micahkwaka.co.uk/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at ChildProcess.cb (/Users/micahkwaka/Desktop/micahkwaka.co.uk/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
at emitTwo (events.js:92:20)
at ChildProcess.emit (events.js:172:7)
[20:16:39] Finished 'sass' after 445 ms
[20:16:39] Starting 'sass'...
[20:16:40] Finished 'sass' after 186 ms
Anyone help?
[22:49:41] Using gulpfile ~/Desktop/Main-KL/gulpfile.js
[22:49:41] Starting 'sass'...
[22:49:41] Starting 'jekyll-build'...
[22:49:41] Starting 'watch'...
[22:49:41] Finished 'watch' after 25 ms
[22:49:41] Finished 'sass' after 257 ms
Configuration file: /Users/kamillusio/Desktop/Main-KL/_config.yml
jekyll 3.4.4 | Error: undefined method `key?' for "redcarpet":String
[22:49:41] 'jekyll-build' errored after 597 ms
[22:49:41] Error: 1
at formatError (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/formatError.js:20:10)
at Gulp. (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/log/events.js:41:15)
at emitOne (events.js:96:13)
at Gulp.emit (events.js:188:7)
at Gulp.Orchestrator._emitTaskDone (/Users/kamillusio/Desktop/Main-KL/node_modules/orchestrator/index.js:264:8)
at /Users/kamillusio/Desktop/Main-KL/node_modules/orchestrator/index.js:275:23
at finish (/Users/kamillusio/Desktop/Main-KL/node_modules/orchestrator/lib/runTask.js:21:8)
at ChildProcess.cb (/Users/kamillusio/Desktop/Main-KL/node_modules/orchestrator/lib/runTask.js:29:3)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
After running gulp command everything looks to be working fine but jekyll rebuild never occurs. If I run jekyll serve command, everything builds just fine. Not sure what the problem is here as it doesn't show any errors. Anyone else experiencing this issue?
FYI, I'm on windows, go figure :*(
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.