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

我确保它们已通过package.json

安装在我的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>

这是gulp-filter

的文档

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

有什么想法吗？

Answer 1

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

工作解决方案：

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

Gulp Minify Task - TypeError：undefined不是函数

1 个答案: