Hello , i bought the sage screencast where is well explained how to use jquery plugins with bower, but i wonder if is it possible to use jquery plugins like we use to do in ROOTS, just puting them in the plugins folder in assets/js/plugins…
Sorry for my english and thank you
A
Yep, just change your manifest.json to look like this:
{
"dependencies": {
"main.js": {
"files": [
"scripts/main.js"
],
"vendor": [
"plugins/your-plugin.js",
"plugins/your-other-plugin.js"
],
"main": true
},
"main.css": {
"files": [
"styles/main.less"
],
"main": true
},
"editor-style.css": {
"files": [
"styles/editor-style.less"
]
},
"jquery.js": {
"bower": ["jquery"]
},
"modernizr.js": {
"bower": ["modernizr"]
}
},
"config": {
"devUrl": "http://example.dev"
}
}
With your directory structure like this:
theme/
theme/assets/
theme/assets/scripts/
theme/assets/scripts/main.js
theme/plugins/
theme/plugins/your-plugin.js
theme/plugins/your-other-plugin.js
thank you so much, i’m gonna try it ,
ooohhh… i’m sorry but it’s not working for me, i tried it, but didn’t work for me, and after i undid all i wrote in “assets/manifest.json” (“ctrl+z”) , when i see web page code in chrome , doesn’t appear the main.js file but it is compiled in dist folder … may i have to do anything else?
thank you
It didn’t work for me as well. The application is able to see the new js files, but it keeps complaining about the code syntax which was working fine while I was using roots.
While it might not be best practice to do this.
You can disable jshint from attempting to validated files in a certain directory. Try adding the proposed ./plugins folder inside a .jshintignore file.
Make a .jshintignore under your sage root
Add these lines:
plugins/**
or
plugins/*.js
That’s fine, you don’t want jshint running on 3rd party code. It should only be used on code you and your other developers have written for the project.
Not following, what’s your manifest.json look like? What errors are you getting?
Also helpful for debugging: go ahead and install the asset-builder cli:
npm i -g asset-builder-cli@latest
then run
assetbuilder -m assets/manifest.json
In your theme root and lemme know what it spits out.
thank you for your patience… look, my assets/manifest.json is:
{
"dependencies": {
"main.js": {
"files": [
"scripts/main.js"
],
"main": true
},
"main.css": {
"files": [
"styles/main.less"
],
"main": true
},
"editor-style.css": {
"files": [
"styles/editor-style.less"
]
},
"jquery.js": {
"bower": ["jquery"]
},
"modernizr.js": {
"bower": ["modernizr"]
}
},
"config": {
"devUrl": "http://localhost/RC_LAB"
}
}
and the error i got when i do assetbuilder:
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab>assetbuilder -m assets/manifest.json
js
main.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\transition.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\alert.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\button.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\carousel.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\collapse.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\dropdown.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\modal.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\tooltip.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\popover.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\scrollspy.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\tab.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\js\affix.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\slick.js\slick\slick.min.js
assets/scripts/main.js
jquery.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\jquery\dist\jquery.js
modernizr.js
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\modernizr\modernizr.js
css
main.css
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\slick.js\slick\slick.css
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\slick.js\slick\slick-theme.css
assets/styles/main.less
editor-style.css
assets/styles/editor-style.less
fonts
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\fonts\glyphicons-halflings-regular.eot
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\fonts\glyphicons-halflings-regular.svg
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\fonts\glyphicons-halflings-regular.ttf
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\fonts\glyphicons-halflings-regular.woff
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\bootstrap\fonts\glyphicons-halflings-regular.woff2
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\slick.js\slick\fonts\slick.eot
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\slick.js\slick\fonts\slick.svg
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\slick.js\slick\fonts\slick.ttf
D:\xampp\htdocs\RC_LAB\wp-content\themes\rclab\bower_components\slick.js\slick\fonts\slick.woff
assets/fonts/**/*
images
assets/images/**/*
and it’s not loading my main.js files, i can’t find that line when i look the web code
<script type='text/javascript' src='//localhost:3000/RC_LAB/wp-content/themes/rclab/dist/scripts/main.js'></script>
i lost this line since i change manifest.json , and i don’t know why? it’s strange
thank you again
Hi, sorry to revive a slightly confusing thread, but it seems like this is exactly what I’m looking for:
I want to install Owl Carousel, but as it’s beta and I’m probably going to modify its code slightly, I’d prefer to just add it the slightly old fashioned way and just have the .js concatenated into main.js.
My manifest.json currently looks like this:
{
"dependencies": {
"main.js": {
"files": [
"scripts/main.js"
],
"vendor": [
"plugins/owl-carousel.js"
],
"main": true
},
"main.css": {
"normalize": [
"bower_components/normalize-css/normalize.css"
],
"files": [
"styles/main.scss"
],
"main": true
}
},
"config": {
"devUrl": "http://powersolutionsuk.dev"
}
}
`
and my directory structure is:
theme/assets/scripts/main.js theme/plugins/owl.carousel.js
Running gulp just ignores owl.carousel.js, minifies my main.js and that’s all.
What am I missing? Is there a way to do what I’m asking? Where would I look for documentation on this?
(I basically want to avoid attaching owl.carousel.js manually via php in another script tag, or having to paste it into main.js)