javascript - 根据环境切换 HTML 文件中的资源

Question

我想根据我的开发环境替换 HTML 文件中的 JavaScript 引用。例如，我想从这里开始:

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

至此

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

有什么方法可以使用 Gulp 或其他构建工具来实现这一点吗？

Answer 1

您可以使用gulp-html-replace来做到这一点和 yargs

your-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/your-file.html:

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

gulp 将输出 dist/your-file.html:

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