npm installを使用して新しいモジュールをインストールする

Question

私はNodeとGulpを使用するプロジェクトに取り組んでいます。サイトのいくつかの新機能用に新しいJavascriptライブラリを追加したいと思います。

私は私が必要なものを行い、このライブラリを見つけました：http://imakewebthings.com/waypoints/

それは私がnpm install waypointsを実行する必要が図書館のウェブサイトで述べているので、私はちょうどそれをした、新しいウェイポイントのディレクトリが私のnode_modulesディレクトリに作成されました。そして、私はこのように私のプロジェクトに新しいライブラリ含めると言われています：

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

しかし、ライブラリは私のプロジェクトのドキュメントルート上の1つのレベルですが、私はちょうどそのためsrc="/node_modules/waypoints/src/waypoint.js"を行うことはできませんフォルダはWebブラウザから到達できません。

私のプロジェクトのgulpfile.jsファイルに新しいモジュールを追加しようとしましたが、まだ動作しません。

var waypoints = require('waypoints'),

私はまだ "捕捉されないにReferenceErrorを：ウェイポイントが定義されていません" 取得エラー。

私には何が欠けていますか？この新しいライブラリをロードするノードおよび/またはgulpを取得するにはどうすればよいですか？

EDIT これは私が、私はそれは、クライアント側で使用するためのライブラリーを含むだ「と思う」私gulpfile.jsに持っているものである：、

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)) 
}); 

Answer 1

あなたはrequire()ウェイポイントにする必要はありませんあなたがサーバー上でそれを使用していないからです。あなたがすべきことは、他のタスクを追加し、以下のようにそれconcat-scriptsの依存作るです：

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... 
}); 

あなたは、あなたのHTMLページに含まれるスクリプトのパスを決定するために、出力フォルダ内のウェイポイントのパスを見ることができます。