構建JavaScript項目時出錯Travis-CI

Question

我有一個項目，我在本地構建的項目是Gulp.js。但是，當我把它推到GitHub和特拉維斯開始構建它。我得到以下錯誤：

module.js:338 
    throw err; 
    ^
Error: Cannot find module 'gulp-concat' 
    at Function.Module._resolveFilename (module.js:336:15) 
    at Function.Module._load (module.js:278:25) 
    at Module.require (module.js:365:17) 
    at require (module.js:384:17) 
    at Object.<anonymous> (/home/travis/build/thyagostall/freecell/gulpfile.js:4:11) 
    at Module._compile (module.js:460:26) 
    at Object.Module._extensions..js (module.js:478:10) 
    at Module.load (module.js:355:32) 
    at Function.Module._load (module.js:310:12) 
    at Module.require (module.js:365:17) 

的.travis.yml：

language: node_js 
node_js: 
    - "0.12" 
before_script: 
    - npm install -g gulp gulp-concat gulp-connect gulp-html-replace gulp-eslint 
script: gulp 

而且我gulpfile.js：

var gulp = require('gulp'), 
    connect = require('gulp-connect'), 
    concat = require('gulp-concat'), 
    htmlreplace = require('gulp-html-replace'); 

var distDir = './build/', 
    sourceDir = './src/'; 

gulp.task('webserver', function() { 
    connect.server({ 
     root: distDir, 
     port: 2345, 
     livereload: true 
    }); 
    gulp.watch('src/**/*.*', ['build', 'images', 'styles', 'vendor']); 
}); 

gulp.task('images', function() { 
    gulp.src(sourceDir + '**/*.{jpg,png,gif}') 
     .pipe(gulp.dest(distDir)); 
}); 

gulp.task('styles', function() { 
    gulp.src(sourceDir + '**/*.css') 
     .pipe(gulp.dest(distDir)); 
}); 

gulp.task('build', function() { 
    gulp.src([sourceDir + '**/utility.js', sourceDir + '**/game_events.js', sourceDir + '**/memento.js', sourceDir + '**/*.js']) 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest(distDir)) 
     .pipe(connect.reload()); 
}); 

gulp.task('vendor', function() { 
    gulp.src(sourceDir + '**/*.html') 
     .pipe(htmlreplace({ 
      'vendor': 'vendor.js', 
      'js': 'main.js' 
     })) 
     .pipe(gulp.dest(distDir)); 
}); 

gulp.task('lint', function() { 
    gulp.src(sourceDir + '**/*.js') 
     .pipe(eslint()) 
     .pipe(eslint.format()) 
}); 

gulp.task('default', ['build', 'images', 'styles', 'vendor']); 

有我失蹤任何明顯的東西嗎？

Answer 1

首先，改變你的.travis.yml這樣：

language: node_js 
node_js: 
    - "0.12" 
before_script: 
    - npm install -g gulp 
script: gulp 

你只需要安裝gulp全球範圍內，因爲這提供了gulp條命令行工具。每official npm documentation：

There are two ways to install npm packages: locally or globally. You choose which kind of installation to use based on how you want to use the package.

If you want to use it as a command line tool, something like the grunt CLI, then you want to install it globally. On the other hand, if you want to depend on the package from your own module using something like Node's require, then you want to install locally.

其次，我做你的帳戶GitHub的一些偵探（從StackOverflow的個人資料相關聯），發現project你試圖建立。看看package.json我看到在devDependencies之間沒有gulp-concat。這可能是由於打字：

npm install gulp-concat 

代替：

npm install gulp-concat --save-dev 

這可以解釋爲什麼你可以在本地生成項目，但它的特拉維斯-CI失敗。將gulp-concat添加到devDependencies應解決該問題。