CODEWITHSUNDEEP
javascriptnode.jsgulp
andrux
andrux

Reputation: 2922

Include new module installed using npm install

I'm working on a project that uses Node and Gulp, and I want to add a new Javascript library for some new features in the site.

I found this library that does what I need: http://imakewebthings.com/waypoints/

It says in the library website that I need to run npm install waypoints, so I did just that, and a new waypoints directory was created in my node_modules directory. Then I'm said to include the new library in my project like this:

<script src="/path/to/noframework.waypoints.min.js"></script>

But, the library is one level above the document root of my project, so I can't just do src="/node_modules/waypoints/src/waypoint.js" because that folder is not reachable from the web browser.

I tried to add the new module to the gulpfile.js file of my project but it still doesn't work.

var waypoints = require('waypoints'),

I still get a "Uncaught ReferenceError: Waypoint is not defined" error.

What am I missing? How do I get node and/or gulp to load this new library?

EDIT This is what I have in my gulpfile.js where I "think" it's including the libraries for use in the client side:

var customJSScripts = ['src/js/custom/**/*.js'];
var libsJSscripts   = ['src/js/libs/**/*.js'];
var allJSScripts = ['src/js/**/*.js'];
var outputFileName = 'custom.min.js';
var outputFolder =  './dist/js/'

gulp.task('jshint', function() {
  return gulp.src(customJSScripts)
    .pipe(jshint({'esversion': 6}))
    .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('concat-scripts', function() {
  if (envVars.minifyJS) {
    gulp.src(customJSScripts)
      .pipe(sourcemaps.init())
      .pipe(concat(outputFileName))
      .pipe(uglify())
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(outputFolder));
  } else {
    gulp.src(customJSScripts)
      .pipe(sourcemaps.init())
      .pipe(concat(outputFileName))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(outputFolder));
  }

  gulp.src(libsJSscripts)
    .pipe(sourcemaps.init())
    .pipe(concat('libs.min.js'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(outputFolder))
});

Upvotes: 0

Views: 193

Answers (1)

kennasoft
kennasoft

Reputation: 1593

You don't need to require() waypoints, since you are not using it on the server. What you should do is add another task and make it a dependency for concat-scripts like below:

gulp.task('move-waypoint', function() {
    var required_files = [
        '../node_modules/waypoints/waypoints.min.js'     //make sure this is the right path  
    ];
    return gulp.src(required_files, {base: '../node_modules/waypoints/'})
         .pipe(gulp.dest(outputFolder));
});

gulp.task('concat-scripts', ['move-waypoint'],function() { //will execute the move-waypoint task first
    //your usual code here...
});

You can then look at the path of waypoint in the output folder to determine the script path to include in your html page.

Upvotes: 1

Related Questions