Vraag Hoe de main-bower-bestanden in één stap kopiëren en injecteren met slik?


Wanneer ik mijn app implementeer, wil ik de prieelafhankelijkheid kopiëren naar de deploy map en injecteer de links naar deze bestanden in de index.html dat is ook in de deploy directory.

Elke stap alleen werkt perfect, want ik kan ze niet combineren.

Kopieer de bestanden:

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

Injecteren van de bestanden:

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

Ik denk dat ik dit in één stap moet doen om de juiste volgorde van de afhankelijke bestanden te behouden.

Ik heb deze combinatie geprobeerd, maar het lukte niet.

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/'));

10
2017-11-26 21:53


oorsprong


antwoorden:


ik raad aan wiredep:

U voegt een blok toe aan uw html:

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

en je bedrade taak ziet er als volgt uit:

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

Die de deps aan je html als zodanig zal toevoegen:

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

U kunt dit dan combineren met useref om alle javascript-afhankelijkheden van uw project te bestellen

html-blok

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

slokdaad taak

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'));
});

Kijk eens hoe generator-gulp-webapp dingen doet: https://github.com/yeoman/generator-gulp-webapp

Merk op $.plugin syntaxis veronderstelt var $ = require('gulp-load-plugins')();


13
2017-11-27 01:02