Question

我正在开发一个使用Node和Gulp的项目，我想为网站中的一些新功能添加一个新的Javascript库。

我发现这个库可以满足我的需求：http://imakewebthings.com/waypoints/

它在图书馆网站上说我需要运行npm install waypoints，所以我就这样做了，并在我的node_modules目录中创建了一个新的waypoints目录。然后我说我的项目中包含了新的库：

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

但是，库比我项目的文档根目录高一级，所以我不能只执行src="/node_modules/waypoints/src/waypoint.js"，因为无法从Web浏览器访问该文件夹。

我尝试将新模块添加到项目的gulpfile.js文件中，但它仍然不起作用。

var waypoints = require('waypoints'),

我仍然得到“未捕获的ReferenceError：没有定义Waypoint”错误。

我错过了什么？如何获取节点和/或gulp来加载这个新库？

修改这就是我在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页面中的脚本路径。

包括使用npm install安装的新模块

1 个答案: