gulpを使用してHTMLの内容を別のhtmlに注入

私は2つのhtmlファイルindex.htmlとbuild.htmlを持っています。 build.htmlは、実際のJSとCSSを持っていた後、私は、index.htmlをにbuild.htmlのコンテンツを挿入する必要がgulpを使用してHTMLの内容を別のhtmlに注入

build.html

<!-- build:js({.tmp/serve,www,src,.tmp/partials}) scripts/vendor.js --> 
<!-- bower:js --> 
<!-- run `gulp wiredep` to automaticaly populate bower script dependencies --> 
<!-- endbower --> 

<script src="../bower_components/angulartics/src/angulartics.js"></script> 
<script src="../bower_components/owl.carousel/dist/owl.carousel.js"></script> 
<!-- endbuild --> 

<!-- build:js({.tmp/serve,www,src,.tmp/partials}) scripts/app.js --> 
<!-- inject:js --> 
<!-- endinject --> 
<!-- endbuild --> 

<!-- compiled css output --> 
<!-- <link href="css/ionic.app.css" 
    rel="stylesheet"> --> 
<!-- ionic/angularjs js --> 
<!-- <script src="lib/ionic/js/ionic.bundle.js"></script> --> 
<!-- config options --> 
<!-- <script src="config/app-config.js"></script> --> 
<!-- run `gulp wiredep` to automaticaly populate bower styles dependencies --> 
<!-- endbower --> 
<!-- endbuild --> 
<!-- build:css({.tmp/serve,src}) styles/app.css --> 
<!-- inject:css --> 
<!-- css files will be automaticaly insert here --> 
<!-- endinject --> 
<!-- endbuild -->

index.htmlを

<html> 
<head> 
</head> 
<body> 
// inject: %HTML5:DYNAMIC:SRC:BUILD% 
</body> 
</html>

ファイル。以下gulpタスクを添付します。

一気ファイル

gulp.task('inject, function() { 
    var injectStyles = gulp.src([ 
    paths.tmp + '/serve/**/*.css', 
    '!' + paths.tmp + '/serve/module/vendor.css', 
    '!' + paths.tmp + '/serve/app/vendor.css' 
    ], { 
    read: false 
    }); 

    var injectScripts = gulp.src(gulp.sources.js) 
    .pipe($.angularFilesort().on('error', $.util.log)); 

    var injectOptions = { 
    ignorePath: [paths.src, paths.tmp + '/serve', paths.tmp + '/partials'], 
    addRootSlash: false 
    }; 

    var wiredepOptions = { 
    directory: 'bower_components', 
    // TODO: Revisit these excludes, delete this comment 
    exclude: [/angulartics/, /sha1/] 
    }; 

    return gulp.src('build.html') 
    .pipe($.inject(injectStyles, injectOptions)) 
    .pipe($.inject(injectScripts, injectOptions)) 
    .pipe(wiredep(wiredepOptions)) 
    .pipe(injectfile({ 
     pattern: '//\\s*inject:<filename>|/*\\s*inject:<filename> ' 
    })) 
    .pipe(gulp.dest(paths.tmp + '/serve')); 
}); 

gulp.task('inject-build',['inject'], function() { 
    return gulp.src(paths.src + '/index.html') 
    .pipe(replace('%HTML5:DYNAMIC:SRC:BUILD%', paths.tmp + '/serve/build.html')) 
    .pipe(gulp.dest(paths.tmp + '/serve')); 
})

今の代わりに、されて何が起こっているのか "//注入：％のHTML5：DYNAMIC：SRC：％を構築する" index.htmlの中で "build.html" ファイルを取得していますパス。この問題を解決するための洞察は高く評価されます。

出典

2017-06-09 Aravind

私が思うに、あなたは 'のために行く必要があり、既存のタスクに 'FSを' インポートする必要があり（ '飲み込む-置き換える'）=が必要

を置き換えますgulp-template-cache'を実行してすべてのコードを小さくする –

次のステートメントはその結果のみを表示しますが、ここでファイルを読み取っていないため、テキストをパス名に置き換えます。あなたがしなければならないことは、ファイルを読み、その結果を置き換えて返すことです。仮定の下で

.pipe(replace('%HTML5:DYNAMIC:SRC:BUILD%', paths.tmp + '/serve/build.html'))

あなたは

var fs = require('fs'); 

gulp.task('inject-build',['inject'], function() { 
    return gulp.src(paths.src + '/index.html') 
    .pipe(replace('%HTML5:DYNAMIC:SRC:BUILD%', function(s) { 
    var tmpl = fs.readFileSync(paths.tmp + '/serve/build.html', 'utf8'); 
    return tmpl; 
})) 
    .pipe(gulp.dest(paths.tmp + '/serve')); 
})

出典

2017-06-09 21:06:08 karthick

gulpを使用してHTMLの内容を別のhtmlに注入

答えて

関連する問題