3

gulp watch-dev(gulpfile.jsスニペットの質問の最後にあります)を使用してビルドするときに、Angular ページに次のスクリプトがあります。

<!-- inject:js -->
  <script src="shared/toolbar/toolbarDirective.js"></script>
  <script src="shared/sidebar/sidebarDirective.js"></script>
  <script src="shared/sidebar/sidbarController.js"></script>
  <script src="components/home/homeService.js"></script>
  <script src="components/blog/blogService.js"></script>
  <script src="components/blog/blogController.js"></script>
  <script src="app.modules.js"></script>
  <script src="app.routes.js"></script>
<!-- endinject -->

app.modules.js他のスクリプトの上に乗りたい。これどうやってするの ？

これはファイル構造です:

app
|
|--shared
|  |--sidebar
|  |  |--sidebarController.js
|  |  |--sidebarDirective.js
|  |  |--sidebarTemplate.html
|  |
|  |--toolbar
|     |--toolDirective.js
|     |--toolbarTemplate.html
|
|--components
|  |--home
|  |  |--sidebarDirective.js
|  |  |--homeView.html
|  |
|  |--blog
|     |--sidebarDirective.js
|     |--blogView.html
|
|--app.modules.js
|--app.routes.js
|--index.html

これは私が物事が失敗すると思うところです:

pipes.orderedAppScripts = function() {
  return plugins.angularFilesort();
};

pipes.builtIndexDev = function() {

// sends verified vendor js in dev folder and catch a pipe ordered
var orderedVendorScripts = pipes.builtVendorScriptsDev()
    .pipe(pipes.orderedVendorScripts());

// sends verified app js in dev folder and catch a pipe ordered
var orderedAppScripts = pipes.builtAppScriptsDev()
    .pipe(pipes.orderedAppScripts());

var appStyles = pipes.builtStylesDev();

return pipes.validatedIndex()
    .pipe(gulp.dest(paths.distDev)) // write first to get relative path for inject
    .pipe(plugins.inject(orderedVendorScripts, {relative: true, name: 'bower'}))
    .pipe(plugins.inject(orderedAppScripts, {relative: true}))
    .pipe(plugins.inject(appStyles, {relative: true}))
    .pipe(gulp.dest(paths.distDev));
 };

buildIndexDevwatch-dev開発環境用の index.html をビルドするために呼び出されます。これが私gulpfile.jsのスニペットです： 

<script src="https://gist.github.com/aemb/43ca3dbc7056157f952d.js"></script>

@HenryZou 、これを行うと、いくつかの副作用があります。

   pipes.orderedAppScripts = function() {
     return gulp.src([
       './**/*.modules.js',
       './**/*.js',
     ]).pipe(plugins.angularFilesort());
   };

ここで奇妙なこと：

  <!-- inject:js -->
  <script src="shared/toolbar/toolbarDirective.js"></script>
  <script src="../distDev/gulpfile.js"></script>
  <script src="../distDev/distDev/app.modules.js"></script>
  <script src="../distDev/app.routes.js"></script>
  <script src="shared/sidebar/sidebarDirective.js"></script>
  <script src="../devServer/routes.js"></script>
  <script src="shared/sidebar/sidebarController.js"></script>
  <script src="../app/app.routes.js"></script>
  <script src="../server.js"></script>
  <script src="components/home/homeService.js"></script>
  <script src="../gulpfile.js"></script>
  <script src="components/blog/blogService.js"></script>
  <script src="components/blog/blogController.js"></script>
  <script src="app.routes.js"></script>
  <script src="app.modules.js"></script>
  <script src="../distDev/app/app.modules.js"></script>
  <script src="../distDev/app.modules.js"></script>
  <script src="../app/app.modules.js"></script>
  <!-- endinject -->

で始まるものはすべて../フォルダに存在しません。他にもありますが、まだ状態が悪いです。

4

3 に答える 3

2

ファイルをグロブする gulp ビルド スクリプトで、他の *.js ファイルの前に *.module.js を指定します。

   gulp.src([
        '/**/*.modules.js',
        '/**/*.js',
        ]).pipe(ngFilesort()),
于 2015-12-29T16:17:15.810 に答える
0

gulp パッケージ gulp-html-replace を使用して、js 宣言を順序付けます

詳細

https://www.npmjs.com/package/gulp-html-replace

編集gulp-html-replace は、縮小/連結されたjsファイルが必要な場合に非常に役立ちます。連結を使用すると、ベンダー js ファイルとカスタム js ファイルを分離できます。 gulp-inject で使用しようとはしていません。

gulp.task('htmlwrite', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'vendorjs': ['vendor.min.js','common.js'], // naming the js for the ordring, multiple files can be added using array 
        'mainjs': 'main.min.js'
    }))
    .pipe(gulp.dest('dist/'));
});

そしてindex.htmlで

<!-- build:vendorjs -->
//includes the vendor js declaration
      <!-- endbuild -->

 <!-- build:mainjs -->

    <!-- endbuild -->

gulp-useminを使用することもできます。gulp -html-replace のような同様の js インジェクションを使用して問題を解決できるようです

于 2015-12-29T16:22:44.517 に答える