Gulp Task Breaking on Angular Files

Question

Tôi có nhiệm vụ gulp được thiết lập và chạy để tạo ứng dụng Angular và nó chạy mà không có lỗi và tạo tệp một cách chính xác, nhưng khi tôi tải trang trên trình duyệt, tôi nhận được thông báo lỗi sau .

Có một số bước hoặc một số plugin mà tôi thiếu để có được tệp Angular cho tất cả "công việc" không? Tôi đã sử dụng các plugin angularFilesort() và ngAnnotate() rồi.

var bower = gulp.src(bower_files) 
    .pipe(concat("bower-expanded.js")) 
    .pipe(gulp.dest(paths.prod)) 
    .pipe(rename("bower.js")) 
    .pipe(uglify()) 
    .pipe(gulp.dest(paths.prod + paths.js));   

// gather and compress the app's js files 
var app = gulp.src(paths.source + "app/**/*.js") 
    .pipe(angularFilesort()) 
    .pipe(concat("app-expanded.js")) 
    .pipe(ngAnnotate({   
      add: true, 
      single_quotes: true 
    })) 
    .pipe(gulp.dest(paths.prod)) 
    .pipe(rename("app.js")) 
    .pipe(uglify()) 
    .pipe(gulp.dest(paths.prod + paths.js)); 

Các lỗi là

TypeError: (intermediate value)(...) is not a function 
(function(angular) { 

mà chỉ vào những dòng mã

(function(angular) { 
    'use strict'; 

    /** 
    * Called with an array this acts like map, otherwise it acts like _.mapValues 
    * in lodash. 
    * @return {Array|Object} The same type as the input argument. 
    */ 
    var mapValues = function(obj, callback) { 
    if (angular.isArray(obj)) 

Các lỗi khác là

Error: [$injector:modulerr] Failed to instantiate module app due to: 
[$injector:modulerr] Failed to instantiate module angularSpinner due to: 
[$injector:nomod] Module 'angularSpinner' is not available! 
You either misspelled the module name or forgot to load it. 
If registering a module ensure that you specify the dependencies as the second argument. 
http://errors.angularjs.org/1.4.4/$injector/nomod?p0=angularSpinner 

Answer 1

tôi nhận thấy bạn không chạy ngAnnotate trên bower c của bạn omponents, nhưng bạn đang chạy uglify trên chúng. Điều này có thể gây ra sự cố của bạn.

Hãy thử:

var bower = gulp.src(bower_files) 
    .pipe(concat("bower-expanded.js")) 
    .pipe(ngAnnotate({   
     add: true, 
     single_quotes: true 
    })) 
    .pipe(gulp.dest(paths.prod)) 
    .pipe(rename("bower.js")) 
    .pipe(uglify()) 
    .pipe(gulp.dest(paths.prod + paths.js)); 

Là một sang một bên, nó không phải là một ý tưởng tuyệt vời để nối tất cả các phụ thuộc của bạn vào một tập tin duy nhất. Trình duyệt có thể xử lý tải không đồng bộ nhiều tệp JS và sẽ làm nhanh hơn rất nhiều so với tải một tệp JS lớn duy nhất.

Answer 2

Sau khi đọc qua các câu trả lời khác nhau trong SO, lỗi đầu tiên thường đề cập đến một số bị lãng quên ; trong các dòng trước lỗi.
Bạn có thể định cấu hình tác vụ concat để sử dụng ; làm người seperator cho các tệp js để tránh điều này.

Vào lần thứ hai, tôi đồng ý với @ShaunScovil, cũng sử dụng các tệp .min được cung cấp từ mỗi gói bower an toàn hơn.

Bạn có thể sử dụng gói này main-bower-files để thiết lập tùy chọn này theo số env và tự động hóa quy trình xây dựng một hoặc nhiều tệp của tất cả các phụ thuộc bower.

Answer 3

Điều tương tự cũng xảy ra với GruntJS và gần đây tôi đã học được cách khắc phục. Hãy chắc chắn rằng tất cả các bộ điều khiển js góc cạnh của bạn, chỉ thị và các bộ lọc có thích hợp bao gồm trên chúng.

Ví dụ wont work:

angular.module('uniApp').directive('autoFocus', function ($timeout) { 
    return function (scope, element, attrs) { 
    scope.$watch(attrs.autoFocus, 
     function (newValue) { 
      $timeout(function() { 
       element.focus(); 
      }); 
     }, true); 
    }; 
}); 

Thông báo về việc trên như thế nào $ timeout không được bao gồm đúng cách?

Ví dụ sẽ làm việc:

angular.module('uniApp').directive('autoFocus',['$timeout', function ($timeout) { 
    return function (scope, element, attrs) { 
    scope.$watch(attrs.autoFocus, 
     function (newValue) { 
      $timeout(function() { 
       element.focus(); 
      }); 
     }, true); 
    }; 
}]); 

Bây giờ $ timeout được bao gồm đúng cách. Đảm bảo kiểm tra chi tiết nhỏ này trên tất cả các bộ điều khiển, bộ lọc và chỉ thị.