角度をがぶ飲みで定義されていないが、私は私のアプリのためのがぶ飲みファイルを書いているファイル

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

をuglified。このアプリはAngularJSを使用しており、ライブラリやその他のライブラリはほとんどありません。しかし、私はJSファイルをuglifyし、すべてのライブラリファイルを1つに結合し、すべてのユーザー定義のJSファイルを1つにすると、角度が定義されていないというエラーが表示されます。コンパイル時に角度ライブラリを持つファイルが最初に来るように、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のような名前をつけます。この方法で拡張子を使用して注文を把握することができます。

例として、私は、ファイルの正しい順序で変数を宣言し、同様にメイン・バウアー・ファイルのパッケージのために必要ですよあなたはどんなerrosを得るべきではない、このパターンに従っている場合

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

縮約する前にすべての連結されたangularjsファイルを管理するには、gulp-ng-annotateを使用する必要があると思います。これは、すべての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')) 
});