gulp中不同环境包含不同管理文件

Question

我有AngularJs项目，其中有入口和常见的文件作为index.html，在该文件中，我已经包括了各种js和css。现在，当我必须上传到生产模式时，我想要更改文件的缩小版本的路径。如何通过gulp自动管理此问题？

我不可能生成用于生产的index.html文件，然后每次都将其恢复为开发模式。我已经试过gulp-inject gulp-replace了。所有的作品，但我必须再次恢复为生产模式。

Answer 1

在gulpfile.js中创建两个不同的变量。一个用于prod，另一个用于dev。第一个变量包含缩小文件的路径，第二个变量包含原始文件的路径。

var dev = [
        'path-of-files.js',
        'path-of-files.js'
    ];

gulp.task('dev', function () {
    var target = gulp.src('path-of-raw-index');
    return target
        .pipe(inject(gulp.src(devMode)))
        .pipe(concat('dev-index.html'))
        .pipe(gulp.dest('target-path'));
});

gulp.task('prod', function () {
    var target = gulp.src('path-of-raw-index');
    return target
        .pipe(inject(gulp.src(prodMode)))
        .pipe(concat('prod-index.html'))
        .pipe(gulp.dest('target-path'));
});

并将这些代码行放在raw-index-file中您想要注入的位置

<!-- inject:js -->
<!-- built js files will go here... -->
<!-- endinject -->