Getting started with Child Theme - new to npm, gulp, browser-sync

[cliffordp]

I followed this repo's README.md

I'm on Mac and new to npm/gulp/brower-stack.

I initially got an error about permissions on the wp-content/themes/understrap-child/node_modules directory. Once I modified the permissions via Finder, I tried npm install again and it seemed to work except for an error about jQuery:

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js install --scripts-prepend-node-path=auto
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated uws@9.14.0: stop using this version

> node-sass@4.9.0 install /wp-content/themes/understrap-child/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/darwin-x64-57_binding.node
Download complete
Binary saved to /wp-content/themes/understrap-child/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Caching binary to /Users/cmp/.npm/node-sass/4.9.0/darwin-x64-57_binding.node

> node-sass@4.9.0 postinstall /wp-content/themes/understrap-child/node_modules/node-sass
> node scripts/build.js

Binary found at /wp-content/themes/understrap-child/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Testing binary
Binary is fine

> understrap@0.8.2 postinstall /wp-content/themes/understrap-child/node_modules/understrap
> gulp copy-assets

[23:41:13] Using gulpfile ~/Documents/.../wp-content/themes/understrap-child/node_modules/understrap/gulpfile.js
[23:41:13] Starting 'copy-assets'...
[23:41:13] Finished 'copy-assets' after 148 ms

> understrap-child@0.5.0 postinstall /wp-content/themes/understrap-child
> gulp copy-assets

[23:41:14] Using gulpfile ~/Documents/.../wp-content/themes/understrap-child/gulpfile.js
[23:41:15] Starting 'copy-assets'...
[23:41:15] Finished 'copy-assets' after 28 ms
npm WARN bootstrap@4.0.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.

added 138 packages from 142 contributors in 20.527s

Process finished with exit code 0

Questions:

1. deprecated warnings at the top?
2. jquery 1.9.1 - 3 is required, but none is installed:
   1. How is it not? Is /wp-content/themes/understrap-child/src/js/jquery.js the wrong location?
   2. Why does it mention both Bootstrap v4.0.0 and v4.1.0?
3. Is exit code 0 good, bad, or nothing actually happened?

Thanks for the themes and the help!

[cliffordp]

And after modifying /wp-content/themes/understrap-child/sass/theme/_child_theme.scss:

/usr/local/bin/gulp --no-cache --update child-theme.scss:child-theme.css
[00:06:34] Working directory changed to ~/Documents/.../wp-content/themes/understrap-child
[00:06:35] Using gulpfile ~/Documents//wp-content/themes/understrap-child/gulpfile.js
[00:06:35] Task 'default' is not in your gulpfile
[00:06:35] Please check the documentation for proper gulpfile formatting

Process finished with exit code 1

Googling says maybe a default should be added to the gulpfile. Might this be correct?

[Thomas-A-Reinert]

About 2.1 - Ignore it. WordPress enqueues it´s own jQuery version anyway. I know it´s not clean but we´re currently in the process of optimizing the parent, the child will follow thereafter asap.

Correct, there is no default task. There doesn´t have to be one and it´s not intended for us to have one also. See the list of available gulp-commands.

Assigned this issue to @0dp who can tell you more about gulp, kay?

@holger1411 can you explain the reason for 2.2 ?

[0dp]

hi @cliffordp

deprecated warnings at the top?

You can ignore those for now. As @Thomas-A-Reinert said, we're working on a fix.

jquery 1.9.1 - 3 is required, but none is installed:

As @Thomas-A-Reinert said, WordPress packs its own version, but if you would like to kill the notice run npm i jquery from the theme folder. But again it doesn't make a difference.

Why does it mention both Bootstrap v4.0.0 and v4.1.0?

It's magic man. No it's a general notice made by the bootstrap package, it's referring to the missing dependency in package.json.

Is exit code 0 good, bad, or nothing actually happened?

Could you please check your npm log file it could be more permission errorsEACCES

Are you able to run gulp watch-bs or other tasks?

[cliffordp]

I tried a few things and realized this small project needed to get up-and-running more quickly than continuing troubleshooting... so I searched for alternatives, scrutinized them, and chose https://wordpress.org/themes/wp-bootstrap-starter/

However, I really appreciate your thorough and quick support and think Bootstrap 4 is the bees knees, so I'm glad you're doing cool things with it.

It sounds like you're already trying to make it better/quicker/easier to get started with Understrap so kudos all around. Peace out! (although I may be back someday)

[0dp]

You should not run $npm init in the understrap or understrap-child directories. You only do that when initialize a new project.

You do not need to run $npm install gulp –save-dev from the understrap or understrap-child directory. Simply run npm install from the understrap directory (or if you are using the child theme, from the understrap-child directory) This will install all theme dependencies and execute $gulp copy-assets for you.

[axlright]

@BryanMcNair Your new workflow looks solid. Regardless of the 404 on js/popper.min in the understrap directory, are you able to add / edit styles in the sass/theme directory and run $ gulp styles and have css/ files update?

-Alex