Gulp Minify Task - TypeError: undefined is not a function

Question

I'm working on building an Instagram clone in AngularJS and am following this guide here.

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

I'm currently in section 19, where I'm trying to minify the JavaScript files to increase website performance. For that, they suggest the use of a task runner known as Gulp .

In my gulpfile.js, I declared all the dependencies I needed

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');

I made sure they were installed in my package.json file through npm install --save-dev depName

Here is my code for the minification task

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'));
});

In the command line, I tried to run the task through gulp minify , but got the following output

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)

I then went to line 34 in my gulpfile.js

.pipe(templatesFilter.restore())

Apparently it has to do with the restore() function in gulp-filter

As the guide suggested, I commented out my script tags in my index.html file

<!--<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>

Here's the documentation for gulp-filter

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

Any ideas?

Answer 1

Try .pipe(templatesFilter.restore) as you can see in the documentation. Probably restore is not a function, or it is not called directly.

Working solution:

Change this line: var templatesFilter = gulpFilter('clients/views/*.html', {restore: true});