javascript - Gulp 缩小任务 - 类型错误 : undefined is not a function

Question

我正在努力在 AngularJS 中构建 Instagram 克隆，并按照此处的指南进行操作。

https://hackhands.com/building-instagram-clone-angularjs-satellizer-nodejs-mongodb/

我目前处于第 19 部分，我正在尝试缩小 JavaScript 文件以提高网站性能。为此，他们建议使用名为 Gulp 的任务运行程序。

在我的 gulpfile.js 中，我声明了我需要的所有依赖项

var gulp = require('gulp');
var csso = require('gulp-csso');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var recess = require('gulp-recess');
var header = require('gulp-header');
var gulpFilter = require('gulp-filter');
var complexity = require('gulp-complexity');
var ngAnnotate = require('gulp-ng-annotate');
var templateCache = require('gulp-angular-templatecache');

我确保它们已通过 npm install --save-dev depName 安装在我的 package.json 文件中

这是我的缩小任务代码

gulp.task('minify', function() {
    var templatesFilter = gulpFilter('clients/views/*.html');

    return gulp.src([
        'client/vendor/angular.js',
        'client/vendor/*.js',
        'client/app.js',
        'client/templates.js',
        'client/controllers/*.js',
        'client/services/*.js',
        'client/directives/*.js'
    ])
        .pipe(templatesFilter)
        .pipe(templateCache({ root: 'views', module: 'Instagram' }))
        .pipe(templatesFilter.restore())
        .pipe(concat('app.min.js'))
        .pipe(ngAnnotate())
        .pipe(uglify())
        .pipe(header(banner))
        .pipe(gulp.dest('client'));
});

在命令行中，我尝试通过gulp minify运行任务，但得到以下输出

Working directory changed to ~\Documents/tutorials/Angular-Instagram
Using gulpfile ~\Documents\tutorials\Angular-Instagram\gulpfile.js
Starting 'minify'
TypeError: undefined is not a function
at Gulp.<anonymous> (Documents\tutorials\Angular-Instagram\gulpfile.js:34.31)

然后我转到 gulpfile.js 中的第 34 行

.pipe(templatesFilter.restore())

显然它与gulp-filter中的restore()函数有关

按照指南的建议，我在 index.html 文件中注释掉了脚本标签

<!--<script src="vendor/angular.js"></script>-->
<!--<script src="vendor/angular-route.js"></script>-->
<!--<script src="vendor/angular-messages.js"></script>-->
<!--<script src="vendor/satellizer.js"></script>-->
<!--<script src="services/api.js"></script>-->
<!--<script src="controllers/home.js"></script>-->
<!--<script src="controllers/navbar.js"></script>-->
<!--<script src="controllers/login.js"></script>-->
<!--<script src="controllers/signup.js"></script>-->
<!--<script src="controllers/detail.js"></script>-->
<!--<script src="directives/serverError.js"></script>-->
<script src="app.min.js"></script>

这是 gulp-filter 的文档

https://www.npmjs.com/package/gulp-filter

有什么想法吗？

Answer 1

尝试.pipe(templatesFilter.restore)，如文档中所示。可能 restore 不是一个函数，或者没有直接调用它。

工作解决方案:

更改此行: var templatesFilter = gulpFilter('clients/views/*.html', {restore: true});