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

Switch resources in HTML file depending on environment

本文关键字：文件 资源 HTML 环境      更新时间：2023-09-26

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

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


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

是否有任何方法可以用Gulp或其他构建工具实现这一点?

可以使用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>
相关文章：