根据环境切换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

执行此操作

您-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>