Gulp缩小任务- TypeError:未定义不是一个函数

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安装在我的npm install --save-dev depName文件中。

下面是我用于缩小任务的代码

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())

显然，它与restore()函数在gulp-filter中有关。

正如指南所建议的，我在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>

这是关于吞咽过滤器的文档

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

有什么想法吗？

Answer 1

如您在文档中所看到的，尝试.pipe(templatesFilter.restore)。可能restore不是函数，也可能不是直接调用的函数。

工作解决方案：

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