環境に応じてHTMLファイルのリソースを切り替えます

Question

私の開発環境に応じてHTMLファイル内のJavaScript参照を交換したいと思います。例えば、私がこれから行きたい：この

<!-- prod --> 
<script src="dist/app.min.js"></script> 

に

<!-- dev --> 
<script src="app.js"></script> 

ガルプまたはいくつかの他のビルドツールでこれを達成する方法はありますか？

Answer 1

あなたはgulp-html-replaceとyargs

あなた-file.html

<!-- build:js --> 
<script src="app.js"></script> 
<!-- endbuild --> 

gulpfile.js

var gulp = require('gulp'), 
    $ = require('gulp-load-plugins')(), 
    args = require('yargs').argv; 

    gulp.task('default', function() { 
     var filePath = (args.env === 'prod' ? 'dist/app.min.js' : 'app.js') 
     return gulp.src('your-file.html') 
      .pipe($.htmlReplace({js: filePath})) 
      .pipe(gulp.dest('./dist')); 
    }); 

> gulp --env prod意志出力DIST /あなたのファイルでこれを行うことができます.html：

<script src="dist/app.min.js"></script> 

gulp意志出力DIST /あなた-file.html：

<script src="app.js"></script>