How to correctly add bxslider to my theme

Hi

So im trying to add bxslider to my theme. I saw a post here but im not sure how to implement that. So here are my steps

  1. In my terminal i type grunt watch
  2. Than paste jquery.bxslider.min.js to my assets/js/plugins
  3. In _main.js i add code $('.bxslider').bxSlider({ pagerCustom: '#bx-pager' });
  4. When i save i get error Running "jshint:all" (jshint) task ERROR: Can't find config file: .jshintrc
  5. I check my scripts.min.js and i dont see anything related to bxslider ( didnt expected it when i saw that error )

On that link @JulienMelissas gave steps how to do that here se quote:

Im not sure how to tell grunt not to run a js hint on the minified version, rest of the steps i get pretty much, but i cant to this first one.

In gruntfile.js - you need to add a ! in front of the thing you don’t want jshint to watch

	jshint: {
		options: {
			jshintrc: '.jshintrc'
		},
		all: [
			'Gruntfile.js',
			'assets/js/*.js',
			'assets/js/plugins/*.js',
			'!assets/js/jquery.bxslider.min.js',
			'!assets/js/scripts.min.js'
		]
	},

That’s from an old project, but you probably get the idea.

Thanks for the fast answer. I just want to mention that i didnt change anything in gruntfile.js before this and it is default.

I did what you said and hit save while my grunt watch is on. And still im getting this :

Reloading watch config...
Running "watch" task
Waiting...OK
File "Gruntfile.js" changed.
Running "jshint:all" (jshint) task
ERROR: Can't find config file: .jshintrc

Do i need to enter something else than grunt watch?

And how do i know that script file is included in scripts.min.js, im checking manually with find but i dont find any instance of bxslider into scripts.min.js

Thanks
Alex

Alex,

You probably should have done a search for that issue, it’s been covered a few times before…

I would have pointed to that first but I read bx slider and thought that was the issue you were having. Add the jshint file and then see what happens.

Hi i saw that post but the guy said he had some errors so i didnt followed it…

I have added that file and now grunt passes fine, but still i don’t se any trace of bxslider in my scripts.min.js file.

Is there any step that im missing?

What version of roots are you on? Can you tell me the path of the file relative to your grunt folder?

Paste your entire gruntfile in here as well if you would, that should tell me what’s up along with the above information.

Not to threadjack here but @ul71m0: can you verify whether you have the file .jshintrc in the root of your theme directory?

If not then please create it with this as its contents: https://github.com/roots/roots/blob/master/.jshintrc

Then try your grunt task again and paste any error message that is output.

@cfx - I think he already added the file, he just probably didn’t add it to the list to compile with everything… That said, I didn’t mention he should copy that one. We’ll see what he replies with.

This is my gruntfile http://pastie.org/9399223#9

After adding jshint file i dont have any errors, it jsut isnt added to final scripts.min.js file.

he just probably didn’t add it to the list to compile with everything

Thats the part that i need to do, im just not sure what do i need to add and where, i thought that it is enough to put file in my /assets/js/plugins directory and it will be complied automatically without need to add it in gruntfile.js.

I mean this is not just for bxslider, what are the required steps to add your own custom script to be compiled in scripts.min.js.

Im using latest version of roots, and my grunt is working fine because all my styling works without any problem. Im using phpstorm and its terminal so when i run npm install im in theme root directory.

Line 49 of your gruntfile should be pulling in the most recent version of your JS file, and any js files added to the /plugins/ folder, so you shouldn’t have to do anything as long as you’re running grunt dev or just grunt.

Are you sure your browser hasn’t cached the js file due to an old version of the scripts file?

Julien thanks a lot, so far i was doing grunt watch and it didnt worked, now i did grunt dev and after saving it got added to scripts.min.js

So just to get it right this time and for the future:

If i put js file to /plugins/ folder i dont need to do anything in gruntfile.js , or i need to tell jshint to ignore it if it is already minified?

And instead of grunt watch i need to type grunt dev?

From the docs:

Available Grunt commands

grunt dev — Compile LESS to CSS, concatenate and validate JS
grunt watch — Compile assets when file changes are made
grunt build — Create minified assets that are used on non-development environments

If you set define('WP_ENV', 'development'); in your wp-config.php then Roots will not use minified assets.

You can make grunt watch create minified assets if you like, see this post: Add x.min.css & x.min.script to watch - #4 by cfx

Glad you worked it out!

@cfx - thanks for posting those details to clear it up…

And just FYI @ul71m0, if I’m only using bxSlider on one page, I tend to leave it in the js/plugins folder, DON’T include it in the minified list, and enqueue it conditionally using an is_page_template statement in /lib/scripts, just to keep down page load. The CSS is small for bxSlider so I usually just make it into a .less file and import it into app.less

Happy site building!

@JulienMelissas that’s a great approach and definitely recommended. There are a few threads around on how to do that, here’s a quick reference: Is there a trick to conditionally wp_enqueue_scripts?

Good stuff guys, it will help me a lot. Thanks :smile: