Method to include additional jquery js's

1

hi guys, I’m newbe in Grunt
trying to correctly include jcarousel js plugin to the theme.

  1. The Call added to _main.js
    …
    common: {
    init: function() {
    // JavaScript to be fired on all pages

    $(function() {
    $(’.jcarousel’).jcarousel();
    });
    …

  2. The jcarousel js are into assets/js/plugins

Do I have to add the path to the jcarousel js into my Gruntfile.js or grunt see them automatically?

‘assets/js/plugins/*.js’,

   uglify: {
          dist: {
            files: {
              'assets/js/scripts.min.js': [
                'assets/js/plugins/*.js',
                '!assets/js/plugins/jcarousel/jquery.jcarousel.js',
                'assets/js/_*.js'
              ]
            },
           ...
          }
        },

Any help would be appreciated!

2

Fixed, jcarousel.skeleton.css wasn’t correctly added.
I’ve added this code before Uglifi in Gruntfile.js and it worked.

It runs ok but… is cleaner? I don’t know…

cssmin: {
      combine: {
        files: {
          'assets/css/main.min.css': [
            'assets/css/jcarousel.skeleton.css',
            'assets/css/app.css'
          ]
        }
      }
    },
3

You have it in a subfolder so it won’t automatically get loaded by Grunt. Either move it up a directory, or reference it directly.

An exclamation mark at the beginning of the array value means exclude this file. So delete that and you should be good to go.

1 Like
4

Thanks Foxaii!
exclamation removed js run :wink:
(I asume exclamation mark is like commenting for Grunt althought I don’t know de difference.)

I was wrong with the code:

cssmin: {
      combine: {
        files: {
          'assets/css/main.min.css': [
            'assets/css/jcarousel.skeleton.css',
            'assets/css/app.less'
          ]
        }
      }
    },

My goal is combine, in Gruntfile.js, jcarousel.skeleton.css with app.less and then put into main.min.css

Is what do recess?

recess: {
      dist: {
        options: {
          compile: true,
          compress: true
        },
        files: {
          'assets/css/main.min.css': [
            'assets/less/app.less'
          ]
        }
      }
    },
5

Should I download “grunt-recess” task?
I’m watching the video “How Grunt Uses Grunt” and there is a “grunt-recess” but after npm install in my console it is not downloaded.

6

Recess was dropped in favour of grunt-contrib-less, but they both do much the same thing (compiling, minifying and concatenating LESS). If you already have grunt-contrib-less and the less task defined in your Gruntfile then you don’t need recess on top.

The easiest way to add additional CSS is to @import the LESS/CSS into your app.less and recompile with grunt; it’s the same thing we do for Bootstrap.

1 Like
7

Yesss, i like this easy and clean way.

many thanks!