角不咕嘟咕嘟定義變醜文件

Question

//ERRRORS SHOWN ON THE CONSOLE 
 

 
main.lib.angular.js:1 Uncaught TypeError: Cannot read property 'noop' of undefined 
 
main.lib.js:1 Uncaught TypeError: Cannot read property 'module' of undefined 
 
main.user.js:1 Uncaught ReferenceError: angular is not defined 
 
(index):52 Uncaught ReferenceError: angular is not defined

我正在寫我的應用程序一飲而盡文件。該應用程序使用AngularJS，它的庫和其他一些庫。但是，當我醜化JS文件並將所有庫文件連接成一個和所有用戶定義的JS文件合併成一個時，我得到一個錯誤，說未定義角度。我已經保留了uglified-concatenated文件的序列，以便在編譯期間首先使用帶有角庫的文件。但是，由於除angular.js之前的angular.js外，還有更多的角度文件，所以我得到一個錯誤。有沒有解決這個問題的方法？另外，如果我不連接角庫文件並導入它們，我仍然會因其他注入模塊出錯而未定義。這是我寫的gulpfile.js：

var gulp = require('gulp'), 
 
    uglify = require('gulp-uglify'), 
 
    plumber = require('gulp-plumber'), 
 
    rename = require('gulp-rename'), 
 
    browserSync = require('browser-sync') 
 
reload = browserSync.reload, 
 
    concat = require('gulp-concat') 
 
cleanCSS = require('gulp-clean-css'); 
 

 
var dest = './dest/' 
 

 
//Angular apps 
 
gulp.task('script-lib-ang', function() { 
 
    gulp.src('./lib/angular/*.js') 
 
    .pipe(plumber()) 
 
    .pipe(uglify({ 
 
     mangle: false 
 
    })) 
 
    .pipe(concat('main.lib.angular.js')) 
 
    .pipe(gulp.dest(dest)) 
 
    .pipe(reload({ 
 
     stream: true 
 
    })); 
 
}); 
 

 
//Task for all the library javascript files 
 
gulp.task('script-lib', ['script-lib-ang'], function() { 
 
    gulp.src(['./lib/**/*.js', '!./lib/angular/*.js']) 
 
    .pipe(plumber()) 
 
    .pipe(uglify({ 
 
     mangle: false 
 
    })) 
 
    .pipe(concat('main.lib.js')) 
 
    .pipe(gulp.dest(dest)) 
 
    .pipe(reload({ 
 
     stream: true 
 
    })); 
 
}); 
 

 
//Task for all custom js files developed by the user 
 
gulp.task('script-user', ['script-lib'], function() { 
 
    gulp.src('./app/**/*.js') 
 
    .pipe(plumber()) 
 
    .pipe(uglify({ 
 
     mangle: false 
 
    })) 
 
    .pipe(concat('main.user.js')) 
 
    .pipe(gulp.dest(dest)) 
 
    .pipe(reload({ 
 
     stream: true 
 
    })); 
 
}); 
 

 
// gulp.task('css-user', function() { 
 
// \t gulp.src(['./css/**/*.css', '!./css/lib/*.css']) 
 
// \t \t .pipe(plumber()) 
 
// \t \t .pipe(cleanCSS()) 
 
// \t \t .pipe(concat('css-user.css')) 
 
// \t \t .pipe(gulp.dest(dest)) 
 
// \t \t .pipe(reload({stream : true})); 
 
// }); 
 

 
gulp.task('css-lib', function() { 
 
    gulp.src('./css/**/*.css') 
 
    .pipe(plumber()) 
 
    .pipe(cleanCSS()) 
 
    .pipe(concat('css-lib.css')) 
 
    .pipe(gulp.dest(dest)) 
 
    .pipe(reload({ 
 
     stream: true 
 
    })); 
 
}); 
 

 
gulp.task('browser-sync', function() { 
 
    browserSync({ 
 
    proxy: 'localhost', 
 
    ui: false 
 
    }); 
 
}); 
 

 
gulp.task('watch', function() { 
 
    gulp.watch('./lib/angular/*.js', ['script-lib-ang']); 
 
    gulp.watch(['./lib/**/*.js', '!./lib/angular/*.js'], ['script-lib']); 
 
    gulp.watch('./app/**/*.js', ['script-user']); 
 
    gulp.watch('./css/**/*.css', ['css-lib']); 
 
}); 
 

 
gulp.task('default', ['script-lib-ang', 'script-lib', 'script-user', 'css-lib', 'browser-sync', 'watch']);

Answer 1

如果您使用的鮑爾客戶端的依賴和使用NPM包像主涼亭，文件將所有的庫文件進行排序按照正確的順序。爲了實現你的項目的正確順序，我會將它們明確地命名爲* .controler.js，* .module.js。通過這種方式，您可以使用擴展名來確定訂單。

例如，我會宣佈一個變量文件的正確順序和需要主涼亭，文件包，如：

var mainBowerFiles = require('main-bower-files'); 
var jsFilesLocation: [ 
      appRoot + '**/*.module.js', 
      appRoot + '**/*.config.js', 
      appRoot + '**/*.service.js', 
      appRoot + '**/*.controller.js', 
      appRoot + '**/*.js' 
     ]; 

/*Now using the Jsfileslocation and the main-bower-files plugin my task will look like*/ 

gulp.task('inject-js', function() { 

     return gulp.src(config.indexHtmlFileLocation) 
     /* Inject bower references */ 
     .pipe(plugins.inject(gulp.src(mainBowerFiles(), { read: false }), 
     /*Inject Code Files */ 
     .pipe(plugins.inject(gulp.src(jsFilesLocation, { read: false }), 
      { relative: true })) 
      .pipe(gulp.dest(destinationPath)); 
    }); 

如果喲遵循這個模式，你不應該得到任何錯誤回報。這裏是鏈接，關於如何提高吞氣TAKS一個偉大的文章：

http://www.johnpapa.net/angular-and-gulp/

謝謝 索瑪。

Answer 2

我認爲你需要使用gulp-ng-annotate在縮小它之前管理所有連接的angularjs文件。這是concat和縮小所有js文件的任務示例：

gulp.task('scripts', function() { 
    return gulp.src(config.development.js) 
    .pipe(concat('app.js')) 
    .pipe(ngannotate()) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest(selectedConfig.ENV.name + '/dist/js')) 
});