0

Overview:

I have a probably pretty simple question here, yet difficult to debug. I am using gulp with _s theme to develop a framework with base functions and styles that can be used for multiple projects. As such, my aim here is to optimise the code at every step to make it as light weight and efficient as possible, whilst retaining all the functionality.

Question:

My question is, I want to concatenate all my js files into one minified js file and just enqueue that one file to reduce server requests etc. The problem I am having is that the js fails when I do this. Is there a way to solve this issue? (pretty broad spec I know), and would concatenating the files in a specific way potentially resolve my issue?

gulpFile: 

    gulp.task("scripts", function() {
  gulp.src(['./assets/js/scripts.js'])
  .pipe( include() )
  .pipe( uglify() )
  .pipe( rename({ suffix: '.min' }) )
  .pipe( gulp.dest("./assets/js") )
});

functions.php js enqueue (original):

wp_enqueue_script('framework-scripts', get_template_directory_uri().'/assets/js/scripts.min.js', array(), '20151215', true);

wp_enqueue_script('framework-scripts', get_template_directory_uri().'/assets/js/scripts.js', array(), '20151215', true);

wp_enqueue_script('framework-scripts', get_template_directory_uri().'/assets/js/scripts.js', array(), '20151215', true);

wp_enqueue_script('framework-navigation', get_template_directory_uri().'/assets/js/navigation.js', array(), '20151215', true);

wp_enqueue_script('framework-flexslider', get_template_directory_uri().'/assets/js/jquery.flexslider.js', array(), '20151215', true);

wp_enqueue_script('framework-skip-link-focus-fix', get_template_directory_uri().'/assets/js/skip-link-focus-fix.js', array(), '20151215', true);

functions.php file (what I want the end result to be): 

wp_enqueue_script('framework-scripts', get_template_directory_uri().'/assets/js/scripts.min.js', array(), '20151215', true);

scripts.js file (this includes all the other js files and concatenates them to scripts.min.js)

//= include jquery.flexslider.js
//= include navigation.js
//=include customizer.js
//= include skip-link-focus-fix.js

so I'm wondering if I am including these files wrong perhaps?

Thanks for all your help

|improve this question
  • What do you mean by the js fails ? What particular error do you get? – RRikesh Aug 22 '16 at 13:12
  • check that your dependency injection is organized correctly – Brandt Solovij Aug 22 '16 at 13:16
  • I get TypeError: wp.customize is not a function and nothing after that. I suspect it will be a catalogue of errors. I am concatenating all JS in _s so i just have this in functions.php wp_enqueue_script('cent_framework-scripts', get_template_directory_uri().'/assets/js/scripts.min.js', array(), '20151215', true); So basically only one script is called instead of the eight or nine I have. – user53340 Aug 22 '16 at 13:18
  • Is there a way to specify code in a comment? looks pretty unreadable at the moment. Sorry about that – user53340 Aug 22 '16 at 13:20
  • Edit your question and add the relevant parts. – RRikesh Aug 22 '16 at 13:22
0

Okay sorry for wasting everyones time. there was a random jQuery() in the file that was causing the issue. Just to clarify my other question though, should I include the js scripts in a particular way? Thanks

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.