title: Gulp Minify Task - TypeError: undefined is not a function
body: <p>I'm working on building an Instagram clone in AngularJS and am following this guide here.</p>
  
  <p><a href="https://hackhands.com/building-instagram-clone-angularjs-satellizer-nodejs-mongodb/" rel="nofollow">https://hackhands.com/building-instagram-clone-angularjs-satellizer-nodejs-mongodb/</a></p>
  
  <p>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 <code>Gulp</code>.</p>
  
  <p>In my gulpfile.js, I declared all the dependencies I needed</p>
  
  <pre><code>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');
  </code></pre>
  
  <p>I made sure they were installed in my <code>package.json</code> file through <code>npm install --save-dev depName</code></p>
  
  <p>Here is my code for the minification task</p>
  
  <pre><code>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'));
  });
  </code></pre>
  
  <p>In the command line, I tried to run the task through <code>gulp minify</code>, but got the following output</p>
  
  <pre><code>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.&lt;anonymous&gt; (Documents\tutorials\Angular-Instagram\gulpfile.js:34.31)
  </code></pre>
  
  <p>I then went to line 34 in my gulpfile.js</p>
  
  <pre><code>.pipe(templatesFilter.restore())
  </code></pre>
  
  <p>Apparently it has to do with the <code>restore()</code> function in <code>gulp-filter</code></p>
  
  <p>As the guide suggested, I commented out my script tags in my index.html file</p>
  
  <pre><code>&lt;!--&lt;script src="vendor/angular.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="vendor/angular-route.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="vendor/angular-messages.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="vendor/satellizer.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="services/api.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="controllers/home.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="controllers/navbar.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="controllers/login.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="controllers/signup.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="controllers/detail.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="directives/serverError.js"&gt;&lt;/script&gt;--&gt;
  &lt;script src="app.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here's the documentation for gulp-filter</p>
  
  <p><a href="https://www.npmjs.com/package/gulp-filter" rel="nofollow">https://www.npmjs.com/package/gulp-filter</a></p>
  
  <p>Any ideas?</p>