search

nvisionative / nvQuickTheme

nvQuickTheme is more than just a great minimalist DNN (DotNetNuke) theme. It is a powerful theme building framework and developer workflow.
https://nvisionative.github.io/nvQuickTheme/
Other
41 stars 39 forks source link

Can't build my theme #155

Closed perezandres closed 5 years ago

perezandres commented 5 years ago

I can't execute gulp build, and therefore my theme renders poorly (no css, no fonts, etc.)

I've installed the required environment to work with nvQuickTheme, and everything seems to be in place. But when setting my dev DNN to use the theme, it won't work. Lookiong for the cause, I see that I dont have the /dist folder. So I try to build the theme, but when I execute (in Git Bash) gulp build a get the error "Task never defined: build". In fact, if I list tasks (gulp --tasks) I don't see the build task. Another thing I've noticed is that package task is now called zippackage. Maybe I didn't installed everything correctly?

Thank you for any help ;-)

david-poindexter commented 5 years ago

@perezandres it sounds like you may have Gulp issues in general. From the Command Prompt, please run gulp -v and let us know the output. Also, what version of nvQuickTheme are you using? This version can be found at the top of the package.json file.

perezandres commented 5 years ago

$ gulp -v CLI version: 2.2.0 Local version: Unknown

nvQuickTheme version is the last one: 2.0.0

david-poindexter commented 5 years ago

@perezandres it doesn't appear that you have Gulp installed globally. Can you try running the following command? 

npm install gulp -g

Once that is done, you should be able to run Gulp commands.

bdukes commented 5 years ago

Actually, I think that is indicating that it's not installed locally, but is installed globally. You may just need to run yarn install to get your local dependencies installed.

bdukes commented 5 years ago

And, in general, when installing gulp globally, you want to use the gulp-cli package, not the gulp package.

david-poindexter commented 5 years ago

@bdukes that's a good point - we need to update the documentation for Gulp 4. 😃 👍

tksheppard commented 5 years ago

On top of that, we should encourage people to install gulp via yarn instead of npm, to keep all dependencies in one system.

perezandres commented 5 years ago

Hi all and thank you for your help ;-) I was pretty sure of having followed the procedure, but probably I missed some step. So, I reinstalled Gulp and ran "yarn install". And also followed @bdukes link. I now have: $ gulp -v CLI version: 2.2.0 Local version: 4.0.0

But I still don't have the build task. I did this same installation on my desktop PC (now I am on my laptop) and got same result. Any clue about what's going wrong?

tksheppard commented 5 years ago

@perezandres

Your welcome, and sorry this is giving you problems. This helps us refine our documentation so other people don't run into the same issues. We appreciate you working through this with us.

If you can bear with me, I want you to try a few things.

Run npm uninstall -g gulp and npm uninstall -g gulp-cli . Run npm list -g --depth=0 to see what global dependencies you have installed to make sure all gulp related dependencies are gone. If there are still some, uninstall those. Run yarn global add gulp and yarn global add gulp-cli . Try to run your build process. If it still doesn't work then run yarn global list --depth=0 and post the output here.

perezandres commented 5 years ago

@perezandres

Your welcome, and sorry this is giving you problems. This helps us refine our documentation so other people don't run into the same issues. We appreciate you working through this with us.

If you can bear with me, I want you to try a few things.

Run npm uninstall -g gulp and npm uninstall -g gulp-cli . Run npm list -g --depth=0 to see what global dependencies you have installed to make sure all gulp related dependencies are gone. If there are still some, uninstall those. Run yarn global add gulp and yarn global add gulp-cli . Try to run your build process. If it still doesn't work then run yarn global list --depth=0 and post the output here.

Hi TK, Thank you very much for your help. I'm happy to help, but I must apologize because I have very little experience at web programming ;-) I've followed your instructions with no errors, but I still can't build (using "gulp build", right?). Here's the output you asked me: $ yarn global list --depth=0 yarn global v1.16.0 info "gulp@4.0.2" has binaries:

tksheppard commented 5 years ago

@perezandres

Something we should have done much earlier is have you check your gulpfile.js against the gulpfile.js in the repo to make sure there were no strange oddities. Did you download the repo and place it, or did you clone it?

perezandres commented 5 years ago

Hi @tksheppard,

I did clone the repo. I've just compared both files (Winmerge) and they are identical.

tksheppard commented 5 years ago

@perezandres

Alright. My next step would be to install gulp locally using yarn. So yarn add gulp. Then test if your build process works. If it doesn't, then try using yarn add gulp-cli. Unfortunately, with the update to gulp 4, things have been rather fickle.

perezandres commented 5 years ago

DONE! The first try with yarn add gulp worked, though it threw some warnings (I'll copy them below, maybe it helps you to re-document the whole process). Now I can build the project ;-) ** $ yarn add gulp yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.4: The platform "win32" is incompatible with this module. info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning " > bootstrap@4.2.1" has unmet peer dependency "jquery@1.9.1 - 3". warning " > bootstrap@4.2.1" has unmet peer dependency "popper.js@^1.14.6". [4/4] Building fresh packages...

success Saved lockfile. warning "gulp" is already in "devDependencies". Please remove existing entry first before adding it to "dependencies". success Saved 5 new dependencies. info Direct dependencies └─ gulp@4.0.2 info All dependencies ├─ glob-watcher@5.0.3 ├─ gulp-cli@2.2.0 ├─ gulp@4.0.2 ├─ liftoff@3.1.0 └─ undertaker@1.2.1 Done in 2.68s. **

tksheppard commented 5 years ago

fsevents is only necessary for Mac users, so that's not a problem for you.

We don't pull bootstrap dependencies because we use the bundled js package that includes the popper.js, and DNN already has jquery.

As for the depencies vs devDependencies, the correct way would be to remove gulp yarn remove gulp then to run yarn to reinstall all dependencies, and see if your build process still works. I would be interested to see if that was creating problems. But I also understand if you want to move on get working on your new theme at this point.

perezandres commented 5 years ago

Don't worry, @tksheppard, I'm happy helping you. I'm gonna try all the process in my laptop and I'll let you know ;-)

david-poindexter commented 5 years ago

@perezandres were you able to try the process on your laptop?

perezandres commented 5 years ago

I'm sorry @david-poindexter, I didn't say anything until now: lots of work lately and rest of things a bit messy "because of" my daughter's athletics competitions (travels,...) Anyway, I was able to get everything working on my laptop, more or less following the same process that with my desktop PC, but I actually was not able to fully understand it: what I mean is that some steps were not the same or I have to repeat some installing or uninstalling more than once. I guess that using Yarn and the changes with Gulp 4 are the key points to modify the process. I don't mind to try it again, if I am abla to uninstall everything... ;-)

david-poindexter commented 5 years ago

@perezandres thanks so much for taking the time to respond. This has been our experience as well so far and it is a bit hard to pinpoint any missteps along the way. :) We'll go ahead and leave this issue open so that others can chime in if they have anything more definitive. Thanks again for trying to help us make the documentation better!

david-poindexter commented 5 years ago

We are doing a bit of clean up in our issues backlog. For now, we will close this issue out. However, feel free to re-open if new information becomes available or there is interest to dig a bit deeper for a definitive solution. Thanks!

Tychodewaard commented 4 years ago

This can stay closed but I'm having troubles building as well. I fetched the latest repo, uninstalled a lot, installed a lot like mentioned above but i get: gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1

Looks like some basics are not going well on my laptop

david-poindexter commented 4 years ago

@Tychodewaard here's what I would do if I were you.

Tychodewaard commented 4 years ago

Still the same:

`gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1

Is it an option to share screens at one point? Just to verify I'm doing things right? I was so happy I had a stable setup and able to make themes...

perezandres commented 4 years ago

Be patient, @Tychodewaard. It took me a lot of tries to get it working both in my laptop and my desktop. Bad news are that I'm not able to reproduce the exact steps I took, but I'm pretty sure they are quite similar to the recipe by David.

david-poindexter commented 4 years ago

Okay - small tweak to my last post. Before running yarn please delete node_modules folder (which shouldn’t be there on a clean clone). Delete package-lock.json (which should never be there) and yarn.lock (which also shouldn’t be there on a clean cloned directory). I would normally be happy to do a screen share, but I am on vacation currently.

Tychodewaard commented 4 years ago

I translated your instructions to:

npm uninstall -g gulp yarn remove gulp npm uninstall -g gulp-cli yarn global add gulp-cli Clone nvQuickTheme into a fresh new folder

delete node_modules folder (which shouldn’t be there on a clean clone). Delete package-lock.json (which should never be there) and yarn.lock (which also shouldn’t be there on a clean cloned directory).

yarn gulp build

The yar n.lock was present. But after deleting that file and running yarn, it was back again.

And the same error: gulp : The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1

david-poindexter commented 4 years ago

@Tychodewaard okay, for your scenario perhaps something is messed up with installing gulp-cli globally. From your command prompt, go ahead and try to install gulp-cli globally using npm.

npm -g install gulp-cli

Just don't use npm for local package management. ;-)

Tychodewaard commented 4 years ago

This seems to work. I can now build and package. Only errors are listed below. I have no idea if I am managing any package. I just want to create DNN themes ;-) Any buttons I should not touch?

Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file.

Using browsers option cause some error. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at: https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist

david-poindexter commented 4 years ago

Excellent @Tychodewaard - glad you got it working. That error you are getting probably needs to be logged as a new issue. Hopefully you are able to proceed now with creating themes! Welcome to the dev world! 😂👍🏼

Tychodewaard commented 4 years ago

Forgot final feedback: Yes, I'm back in business. Many thanks! Have a great holiday ;-) I'll log the other stuff as new issues.

david-poindexter commented 4 years ago

Excellent thanks 🙏🏼