taylorbryant / jekyll-starter-tailwind Goto Github PK

After starting the server, withouth making any change in the CSS or elsewhere, it keeps re-loading every 5s automatically, I don't have any control on it.

FYI, I'm using a personal tailwind.config.js file from another project.

Here is my terminal log:

azimuth5 yarn start
yarn run v1.12.3
$ gulp serve
[13:29:25] Requiring external module babel-register
[13:29:28] Using gulpfile ~/Sites/azimuth5/gulpfile.babel.js
[13:29:28] Starting 'serve'...
[13:29:28] Starting 'buildJekyll'...
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.058 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:30] Finished 'buildJekyll' after 1.86 s
[13:29:30] Starting 'processStyles'...
[13:29:31] Finished 'processStyles' after 1.1 s
[13:29:31] Starting 'startServer'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:4000
    External: http://192.168.0.12:4000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: _site
[Browsersync] Watching files...
[13:29:35] Starting 'buildJekyll'...
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.223 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:38] Finished 'buildJekyll' after 3.14 s
[13:29:38] Starting 'processStyles'...
[13:29:45] Finished 'processStyles' after 7.32 s
[13:29:45] Starting 'buildJekyll'...
[Browsersync] File event [change] : _site/assets/css/style.css.map
[Browsersync] File event [change] : _site/assets/css/style.css
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.071 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:48] Finished 'buildJekyll' after 2.72 s
[13:29:48] Starting 'processStyles'...
[13:29:49] Finished 'processStyles' after 1.27 s
[13:29:49] Starting 'buildJekyll'...
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.037 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:51] Finished 'buildJekyll' after 1.38 s
[13:29:51] Starting 'processStyles'...
[13:29:51] Finished 'processStyles' after 595 ms
[13:29:51] Starting 'buildJekyll'...
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.024 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:52] Finished 'buildJekyll' after 928 ms
[13:29:52] Starting 'processStyles'...
[13:29:53] Finished 'processStyles' after 442 ms
[13:29:53] Starting 'buildJekyll'...
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.024 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:54] Finished 'buildJekyll' after 892 ms
[13:29:54] Starting 'processStyles'...
[13:29:54] Finished 'processStyles' after 503 ms
[13:29:54] Starting 'buildJekyll'...
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.024 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:55] Finished 'buildJekyll' after 888 ms
[13:29:55] Starting 'processStyles'...
[13:29:56] Finished 'processStyles' after 410 ms
[13:29:56] Starting 'buildJekyll'...
Configuration file: /Users/vianneybernet/Sites/azimuth5/_config.yml
            Source: /Users/vianneybernet/Sites/azimuth5
       Destination: /Users/vianneybernet/Sites/azimuth5/_site
 Incremental build: enabled
      Generating... 
                    done in 0.024 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[13:29:57] Finished 'buildJekyll' after 835 ms
[13:29:57] Starting 'processStyles'...
[13:29:57] Finished 'processStyles' after 522 ms
[13:29:58] Starting 'buildJekyll'...

https://github.com/tailwindcss/tailwindcss/releases/tag/v1.4.0

🚀

In my humble opinion, this template is missing a compiler from em6 to "native javascript".

Hey guys, so I'd like to say great project! (i should note this isn't actually an issue, more of a discussion topic. So apologies if this isn't the right place for it)

I just had a couple of questions about the building of jekyll, the first is around this

task("buildJekyll", () => {
  browserSync.notify("Building Jekyll site...");

  const args = ["exec", jekyll, "build"];

  if (isDevelopmentBuild) {
    args.push("--incremental");
  }

  return spawn("bundle", args, { stdio: "inherit" });
});

I wanted to understand a little more about what this is doing/how it works because i wondered if i could replicate what it does using npm scripts, which leads me to my second question...

Have you guys managed to use something like breakpoint-sass and or bootstrap on this project? The reason i ask is because I've had some issues with gulp specific packages in regards to the sass globing of files, I've been able to achieve this kind of thing using npm scripts on other projects (and this one - i haven't committed this to my repo because it's in a half baked state) but then it kinda falls apart when it comes to the "buildJekyll" build process and it's not really ideal to mix task runners In my opinion.

So i think best scenario for me would be to either convert the project to use npm script or solve the sass globing issue with gulp, because i feel that without the ability to import other projects like breakpoint sass for example, my project will fall slightly short of it's full potential.

Any pointers to these issues or how i could move forward would be great. Thanks in advance.

Hey Taylor, I started using your starter kit for a new project I'm doing, but the project failed to start.

I've done some changes to run the kit:
Changed

const jekyll = child.spawn('jekyll', ['serve',
    '--watch',
    '--incremental',
    '--drafts'
  ]);

with

const jekyll = child.exec('jekyll serve --watch --incremental --drafts');

I'm not familiar with Gulp, so this might not be the Gulp way of doing things.

Hi there,
Thanks for posting this starter kit. I've been successfully running it locally and have been able to use Tailwind perfectly well.

I have completed my site and now wish to publish it to GitHub Pages - however, I hit a roadblock and am not sure how to proceed with this. After pushing all the site files to a repo, I activate GitHub Pages for the repo and see the website load up; however, none of the CSS is rendered, neither the style.css file in your template that injects Tailwind, nor my own custom css file.

I know this is not an issue but I did not know where else to ask. Do you have any advice as to how this can be resolved? I would greatly appreciate any guidance!

css and serve run concurrently. This is expected behavior, because Gulp tasks run with maximum concurrency.

Because of this, there are redundant calls to css in the current Gulpfile. While the initial call to the css task is running, the serve task is started. Once css makes changes to the CSS files serve is watching, css is ran several more times unnecessarily.

Hello,

Autoprefixer isnt running on the development build. Certain utility classes won't work on some modern browsers because the vendor prefixes are not added. For example the following HTML

<span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
    Hello world
</span>

will render

This is because autoprefixer doesn't add -webkit-background-clip: text; to the utility class.

In the gulpfile.babel.js file adding autoprefixer to the development build would fix it.

return src(PRE_BUILD_STYLESHEET)
  .pipe(
    postcss([
      atimport(),
       tailwindcss(TAILWIND_CONFIG),
      ...(isDevelopmentBuild ? [autoprefixer()] : [autoprefixer(), cssnano()]),
    ])
  )
  .pipe(dest(POST_BUILD_STYLESHEET));

This is related to tailwindlabs/tailwindcss#2300. Adam Wathan says:

We don't include vendor prefixes in Tailwind because every project has different browser requirements, so instead we recommend using Autoprefixer to handle all of that

Right now, there is only the default task. On save, every single task and optimization is run. I'd like to break out the task into separate dev and build tasks.

The dev task wouldn't minify, run autoprefixer, or remove unused CSS. With the current setup, there's extraneous steps that unnecessarily prolong build time.

Hi Taylor,

Thanks for putting this starter theme together, it's been hugely useful so far!

My issue is similar to issue #64 .

I still get the same error as adrivn with the new update to the script you released, I was able to partially make this work after adding the following packages from npm:

win-node-env
win-spawn

Unfortunately I still get an error when trying to run "npm run build" locally on my machine or on Netlify, this is what Netlify returns when trying to deploy:

9:54:46 PM: Verify run directory
9:54:46 PM: Executing user command: npm run build
9:54:46 PM: npm
9:54:46 PM: ERR!
9:54:46 PM: missing script: build

I can confirm the script is running against the correct directory.

Hi there - thanks so much for this project, it's been a great way for me to transition into using Tailwind.

I have a problem where the 'npm run start' command watches things well in regards to css and template changes but it doesn't pick up changes to, or additions to, files in /_posts/ I see you have your own repo with a blog made using this code - did you have the same problems?

Many thanks from NZ.

I'm considering moving away from Gulp and just processing the files with the CLI included with each tool. This way, I could migrate away from Gulp and use npm scripts.

Hi Taylor
First of all thanks for your work in putting together this bundle. I seldom open issues in Github, but I'm trying to start a project of my own and your solution seems almost tailor-made for my purposes. Sadly I use Windows 10, so when I run npm run start I get this:

`λ npm run start

[email protected] start c:\Playground\StaticSites\tw
gulp serve
[18:39:11] Requiring external module babel-register
[18:39:12] Using gulpfile c:\Playground\StaticSites\tw\gulpfile.babel.js
[18:39:12] Starting 'serve'...
[18:39:12] Starting 'buildJekyll'...
[18:39:12] 'buildJekyll' errored after 13 ms
[18:39:12] Error: spawn bundle ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:264:19)
at onErrorNT (internal/child_process.js:456:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
[18:39:12] 'serve' errored after 23 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: gulp serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`

What do you think might be causing this?

Question: does this template optimize images (resize + compress)

Thank you!

I hope you know but what's your plan for upgrading to version 2 of tailwindcss? See more here https://tailwindcss.com/docs/upgrading-to-v2#install-tailwind-css-v2-0-and-post-css-8

Greetings! I was poking around and looking to use this for a small project test ~ perhaps updating to the latest release would be good?

I tried to submit a pull request but receiving authentication errors.

https://github.com/tailwindcss/tailwindcss/releases/tag/v0.7.4

The current iteration of the Gulpfile isn't working as intended. When running the default Gulp task, a new blank tab is opened instead of localhost:4000.

Make the starter a little less barebones and add a few example pages.

I'm currently doing a fresh installation, and when executing npm run start I got the following message:

[00:25:36] Requiring external module babel-register
/path/to/gulpfile.babel.js:1
import autoprefixer from "autoprefixer";
       ^^^^^^^^^^^^

SyntaxError: Unexpected identifier

There's still more message after the unexpected identifier line, if it's necessary I will post it here.

Hi,

I'm enjoying your repo, I've come across the same fatal error after using the development process - after awhile of changing code and saving changes, the script crashes out - I've tested this on Windows and Mac OSX with the same results - the error below is output upon crashing.

**<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 0x1009ce8d9]

Security context: 0x10eebe6808d1
1: handle(aka handle) [0x10ee39e76f09] [/Users/ahaan/Documents/GitHub/CC-a-haan-jekyll-SRC-Tailwind/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:~123] [pc=0x741ccdf2719](this=0x10eec2b401b9 ,0x10ee39e76f49 <JSFunction (sfi = 0x10eeacb9e5a9)>,0x10ee884eeb71 )
2: /* anonymous /(aka / anonymous */) [0x1...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x1011bdf85 node::Abort() (.cold.1) [/usr/local/bin/node]
2: 0x10009d569 node::Abort() [/usr/local/bin/node]
3: 0x10009d6cf node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
4: 0x1001de957 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
5: 0x1001de8f7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
6: 0x100364635 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
7: 0x100365e8a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
8: 0x10036290e v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x1003606c0 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x10036c4ea v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x10036c571 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x10033a78a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
13: 0x100689cc0 v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
14: 0x1009ce8d9 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: cross-env NODE_ENV=development gulp serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ahaan/.npm/_logs/2021-02-14T18_20_41_950Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: npm run dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ahaan/.npm/_logs/2021-02-14T18_20_42_027Z-debug.log**

Below is whats found in the debug log

**0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]predev: [email protected]
6 info lifecycle [email protected]dev: [email protected]
7 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/ahaan/Documents/GitHub/CC-a-haan-jekyll-SRC-Tailwind/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/ahaan/Documents/GitHub/CC-a-haan-jekyll-SRC-Tailwind/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle [email protected]dev: CWD: /Users/ahaan/Documents/GitHub/CC-a-haan-jekyll-SRC-Tailwind
10 silly lifecycle [email protected]dev: Args: [ '-c', 'cross-env NODE_ENV=development gulp serve' ]
11 silly lifecycle [email protected]dev: Returned: code: 1 signal: null
12 info lifecycle [email protected]dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: cross-env NODE_ENV=development gulp serve
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/ahaan/Documents/GitHub/CC-a-haan-jekyll-SRC-Tailwind
16 verbose Darwin 19.6.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v12.18.2
19 verbose npm v6.14.5
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: cross-env NODE_ENV=development gulp serve
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
**

In order to get this to build on my Windows 10 machine, I had to do the following:

1. npm install --save-dev cross-env
2. Change the scripts in package.json to be cross-env NODE_ENV...
3. npm install babel-register
4. npm install win-spawn
5. bundle install

Only then could I run npm run dev successfully. (Yay!)

I was using my default built in VS code terminal (as administrator), if that's relevant.
I hope this might be helpful for others.

p.s. This looks really cool, I'm looking forward to playing around with it! Thanks