2016-04-07 141 views
0

我對使用最新的Javascript框架和工具鏈進行現代web應用程序開發的經驗很少。

我用'Gulp Angular'yeoman發生器安裝了一個工具鏈和腳手架。我相信最初的構建工作正常。

現在,gulp serve工程確定,但試圖建立一個分佈(gulp build)結果:

TypeError: $.mainBowerFiles is not a function

我怎樣才能讓我的分佈構建再次合作?

咕嘟咕嘟文件:

/** 
* Welcome to your gulpfile! 
* The gulp tasks are split into several files in the gulp directory 
* because putting it all here was too long 
*/ 

'use strict'; 

var gulp = require('gulp'); 
var wrench = require('wrench'); 

/** 
* This will load all js or coffee files in the gulp directory 
* in order to load all gulp tasks 
*/ 
wrench.readdirSyncRecursive('./gulp').filter(function(file) { 
    return (/\.(js|coffee)$/i).test(file); 
}).map(function(file) { 
    require('./gulp/' + file); 
}); 


/** 
* Default task clean temporaries directories and launch the 
* login optimization build task 
*/ 
gulp.task('default', ['clean'], function() { 
    gulp.start('build'); 
}); 

的package.json:

{ 
"name": "vweb", 
"version": "0.0.0", 
"dependencies": {}, 
"scripts": { 
    "test": "gulp test" 
}, 
"devDependencies": { 
    "estraverse": "~4.1.0", 
    "gulp": "~3.9.0", 
    "gulp-autoprefixer": "~3.0.2", 
    "gulp-angular-templatecache": "~1.8.0", 
    "del": "~2.0.2", 
    "lodash": "~3.10.1", 
    "gulp-cssnano": "~2.1.1", 
    "gulp-filter": "~3.0.1", 
    "gulp-flatten": "~0.2.0", 
    "gulp-eslint": "~1.0.0", 
    "eslint-plugin-angular": "~0.12.0", 
    "gulp-load-plugins": "~0.10.0", 
    "gulp-size": "~2.0.0", 
    "gulp-uglify": "~1.4.1", 
    "gulp-useref": "~3.0.3", 
    "gulp-util": "~3.0.6", 
    "gulp-ng-annotate": "~1.1.0", 
    "gulp-replace": "~0.5.4", 
    "gulp-rename": "~1.2.2", 
    "gulp-rev": "~6.0.1", 
    "gulp-rev-replace": "~0.4.2", 
    "gulp-htmlmin": "~1.3.0", 
    "gulp-inject": "~3.0.0", 
    "gulp-protractor": "~2.1.0", 
    "gulp-sourcemaps": "~1.6.0", 
    "gulp-sass": "~2.0.4", 
    "gulp-angular-filesort": "~1.1.1", 
    "main-bower-files": "~2.9.0", 
    "wiredep": "~2.2.2", 
    "karma": "~0.13.10", 
    "karma-jasmine": "~0.3.6", 
    "karma-phantomjs-launcher": "~0.2.1", 
    "phantomjs": "~1.9.18", 
    "karma-angular-filesort": "~1.0.0", 
    "karma-phantomjs-shim": "~1.2.0", 
    "karma-coverage": "~0.5.2", 
    "karma-ng-html2js-preprocessor": "~0.2.0", 
    "browser-sync": "~2.9.11", 
    "browser-sync-spa": "~1.0.3", 
    "http-proxy-middleware": "~0.9.0", 
    "chalk": "~1.1.1", 
    "uglify-save-license": "~0.4.1", 
    "wrench": "~1.5.8" 
}, 
"engines": { 
    "node": ">=0.10.0" 
} 
} 
+0

請發佈gulpfile.js和package.json的內容。 – Barryman9000

+0

@ Barryman9000完成 –

+0

你可能需要這個包:https://www.npmjs.com/package/gulp-main-bower-files – kazenorin

回答

2

我看你已經安裝"gulp-load-plugins",但它在你的gulpfile.js無處提及。該模塊的目的是加載所有必需的模塊,以便不需要單個require

在致電$.mainBowerFiles之前,您應該添加以下內容。

var $ = require('gulp-load-plugins')({ 
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files'], 
    replaceString: /\bgulp[\-.]/ 
}); 

這裏,main-bower-files必須在手動模式注入,如果其他模塊也有類似的名稱,你可以使用通配符爲好。

+0

謝謝Bikas! –

相關問題