How can I include my own JS and CSS in your gulp commands

Good Evening,

I just upgraded to your latest V7 and can not wait to get my clients updated.

With V6, I have had my own gulp file that merges your JS/CSS with my custom solutions and produces 1 file for each. Though my CSS changes are not that important, my custom JS changes are.

Though my gulp uses all the same versions and even calls that yours does when building the CSS, I receive an error:

XX:~/buildinggulp/pbtheme-canvas-theme_brnch-ThemeFiles/public_files_build$ gulp buildCssSass;
[00:24:35] Using gulpfile ~/buildinggulp/pbtheme-canvas-theme_brnch-ThemeFiles/public_files_build/gulpfile.js
[00:24:35] Starting 'buildCssSass'...
buildCssSass started
ScssList_NeedsBuild [ './HTML/style.scss',
  './CustomDesign/utilities.scss',
  './CustomDesign/theme-overrides.scss' ]
[00:24:36] 'buildCssSass' errored after 1.08 s
[00:24:36] Error in plugin "gulp-sass"
Message:
    HTML/sass/_variables.scss
Error: Function rgb is missing argument $blue.
        on line 15 of HTML/style.scss
>> $tabs-border-color     :          rgb(var(--#{$cnvs-prefix}contrast-rgb), .0
   ----------------------------------^

Details:
    status: 1
    file: /home/jconklin/buildinggulp/pbtheme-canvas-theme_brnch-ThemeFiles/public_files_build/HTML/sass/_variables.scss
    line: 648
    column: 35
    formatted: Error: Function rgb is missing argument $blue.
        on line 15 of HTML/style.scss
>> $tabs-border-color     :          rgb(var(--#{$cnvs-prefix}contrast-rgb), .0
   ----------------------------------^

    messageFormatted: HTML/sass/_variables.scss
Error: Function rgb is missing argument $blue.
        on line 15 of HTML/style.scss
>> $tabs-border-color     :          rgb(var(--#{$cnvs-prefix}contrast-rgb), .0
   ----------------------------------^

    messageOriginal: Function rgb is missing argument $blue.
    relativePath: HTML/sass/_variables.scss
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false

I believe this is because I am running my gulp script up one directory from yours, and the bootstrap directories are not in the same location as expected.

/pathtofiles/myGulpScript
/pathtofiles/HTML/canvasFilesAndDirectories

Though I do not need you to diagnose my specific issue, I was wondering if you have any thoughts on how someone can include their own JS and CSS and run your gulp script?

I see your note in the SCSS and Gulp getting started, that we should override "sass/bootstrap/variables.scss (Bootstrap Variables) and the sass/variables.scss". But that means I need to make sure I remember to make the same changes next time I download your theme. And it also does not help with JS.

I was considering making a script to run your gulp and then a simple version of mine to combine it all, but that is a little more complicated than I would like.

I understand that this goes WAY past the support you offer, but if you have any thoughts, I would greatly appreciate them.

Thanks.

Thank you for the reply. I actually assume my issues deal with a bad version. I ran your gulp project alone and not mine) and received the same error:

Function rgb is missing argument $blue.

Once I am back to this project later this week I will review all my local and global versions since there is some type of conflict, and all the rgb(var(--#{$cnvs-prefix}contrast-rgb), type declarations are failing.

Again I will test some more on my end. I may try a second server as well that has not up top date software overall.

Thanks again.

Ok... ran a fast test again using just your gulp file and your directories (not my scripts/files). I also cleared out my node_modules within the project and actually received a different error.

I found I needed to upgrade my node and npm versions to what I use on some other projects and your minify gulp step ran properly...

$ node -v; npm -v;
v16.14.1
8.5.0

It was a much lower version before this. That seemed to cause the issues.

I would ask you to include your recommended NODE/NPM versions within the SCSS and Gulp getting started guide.

I still have not re-run my original gulp script to see if the issue was addressed. I assume it would be. But I do not think I will need that anymore. Instead, I will create a new solution to build your files using your gulp script and then run my script to generate my client-specific profiles and pull in your JS/CSS.

Thanks again.

I see that running the JS gulp steps will minify all the JS and place it into dist/js...

3-CanvasFiles$ ls dist/js/
chart.js                    fn.lazyload.js            fn.youtube.js                  module.html5video.js          module.twitter.js
chartjs-plugin-zoom.min.js  fn.lightbox.js            functions.js                   module.instagram.js           module.videofacade.js
chart-utils.js...

But it is not creating dist/css in the same way.

$ ls dist
js  style.css  style-rtl.css

Is this a version issue again? Or is creating dist/css not the intention of the gulp script?

Right now, I feel my only solution is to include some Canvas files from /dist, some from /dist/js, and some from /css.

Thanks.

Update: I wanted to add my specific goal here...

I have three sites using the Canvas theme, with more to come.

I run a script that:

• Copies all my custom design files onto my dev server and runs my gulp script for each site. This makes sure each site has a different look and feel.
• Copies Canvas css/style/js directories and files onto my dev server, runs your gulp
• Copies your dist/ dir into my site-specific directories and copies everything into my git repo

On my internal development servers, I pulled down my design project from GIT, and updated the templates to use all these new files. I was surprised that the dist/ dirs did not have all the CSS.

I assumed that it was just something I did in my complicated process. But it seems like it just might be the gulp script in general.

Thanks.

"The gulpfile.js currently does not generate a dist/css Folder. This is because the CSS Files are already compiled in the main directly."

The point of gulp is to create one /dist directory with everything someone will need for a production build. But with this system, I will have to include things from /dist and from /css. As a user here, that doesn't make sense.

"consider finding the following code:"

Any custom changes to your script today will certainly be lost and forgotten in weeks or months once I download your new version. I have the memory of a small fish.

I can add something to my bash script that can inject new code into the gulp script before I run it, but that is also a hack.

"This will generate CSS Files from all the directories (like demos/ Folder)."

Your htmlminify and imageminify steps do that same thing right now. It even slurps in the node_modules directory...

$ tree dist/node_modules/
dist/node_modules/
├── browser-sync-ui
│   └── public
│       ├── fonts
│       │   └── source-sans
│       │       ├── sourcesanspro-bold-webfont.svg
│       │       ├── sourcesanspro-it-webfont.svg
│       │       └── sourcesanspro-regular-webfont.svg
│       └── img
│           ├── icons
│           │   └── icons.svg
│           ├── logo.svg
│           └── ps-bg.gif
└── serve-index
    └── public
        └── icons
            ├── application_xp.png
            ├── application_xp_terminal.png
            ├── box.png
            ├── cd.png
            ├── controller.png
            ├── drive.png
            ...

Maybe in a future version, you would consider adding a new gulp function just for making a clean /dist, or at least just for copying in the CSS dir?

For now, I will have my bash script copy /css into dist before copying it to my GIT project.

Thanks again. I truly appreciate your time, and love this project.