Sunday, 23 April 2017

How to export jQuery modules to a file using gulp?

I imported all jQuery components with bower (core.js, traversing.js, etc), but, as I will not use all of it in my project, I want to create a file with the jQuery modules that I will really use, along with some other javascript files, like bootstrap.js, slick.js, for example. To join those files, I'm using Gulp.js, but the browser do not recognize those jQuery module files, it shows an "define is not a function" error.

To find the component files that I want, I'm using an array, and then concatenating all of it.

const jquery_modules_dir = 'bower_components/jquery/src/';
let jquery_modules = ['core', 'selector', 'traversing', 'selector-native'];
let extra_exports = ['bower_components/MDBootstrap/js/mdb.js', 'bower_components/tether/dist/js/tether.js'];

let lib_assets = [];
for(let item of jquery_modules) lib_assets.push(jquery_modules_dir + item + '.js');
for(let item of extra_exports) lib_assets.push(item);

// Libraries js task
gulp.task('js_lib', function() {
    return gulp.src(lib_assets)
        .pipe(concat('JS.lib.debug.js'))
        .pipe(gulp.dest('dist/js/'))
        .pipe(uglify())
        .pipe(rename('JS.lib.min.js'))
        .pipe(gulp.dest('dist/js/'));
});  

I know that I have to do some treatment in jQuery modules code, but I don't know how to do it.



via Christian Valentin

No comments:

Post a Comment