10

アプリをデプロイするときに、bower の依存関係をdeployディレクトリにコピーし、これらのファイルへのリンクをディレクトリにもある に挿入しindex.htmlますdeploy。

各ステップだけでも完全に機能しますが、それらを組み合わせることができません。

ファイルをコピーします。

return gulp.src(mainBowerFiles(), { read: false })
    .pipe(gulp.dest('./deploy/lib/'));

ファイルの挿入:

return gulp.src('./deploy/index.html')
    .pipe(plugins.inject(
        gulp.src(mainBowerFiles(), { read: false }), { relative: true }))
    .pipe(gulp.dest('./deploy/'));

依存ファイルの正しい順序を維持するには、これを 1 つのステップで実行する必要があると思います。

この組み合わせを試してみましたが、うまくいきませんでした。

return gulp.src('./deploy/index.html')
    .pipe(plugins.inject(
        gulp.src(mainBowerFiles(), { read: false })
            .pipe(gulp.dest('./deploy/lib/'), { relative: true })))
    .pipe(gulp.dest('./deploy/'));
4

1 に答える 1

13

私はwiredepをお勧めします：

html にブロックを追加します。

<html>
<head>
</head>
<body>
  <!-- bower:js -->
  <!-- endbower -->
</body>
</html>

そして、wiredep タスクは次のようになります。

// inject bower components
gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;
  gulp.src('app/*.html')
    .pipe(wiredep())
    .pipe(gulp.dest('app'));
});

次のように、dep を html に追加します。

<html>
<head>
</head>
<body>
  <!-- bower:js -->
  <script src="bower_components/foo/bar.js"></script>
  <!-- endbower -->
</body>
</html>

これをuserrefと組み合わせて、プロジェクトのすべての JavaScript 依存関係を順序付けることができます

html ブロッ​​ク

<!-- build:js scripts/app.js -->
<!-- bower:js -->
<script src="bower_components/foo/bar.js"></script>
<!-- endbower -->
<script src="js/yourcustomscript.js"></script>
<!-- endbuild -->

ぐるぐるタスク

gulp.task('html', ['styles'], function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});

  return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe(gulp.dest('dist'));
});

generator-gulp-webapp がどのように機能するかを見てみましょう: https://github.com/yeoman/generator-gulp-webapp

注:$.plugin構文は、var $ = require('gulp-load-plugins')();

于 2014-11-27T01:02:15.093 に答える