时间戳

首页 > 解决方案 > 管理文件包括在 gulp 中针对不同环境的不同

gulp - 管理文件包括在 gulp 中针对不同环境的不同

问题描述

我有 AngularJs 项目，它具有条目和通用文件index.html，在该文件中我包含了各种js和css. 现在，当我必须上传到生产模式时，我想将路径更改为文件的缩小版本。如何使用 gulp 自动管理它？

我不可能index.html为生产生成文件，然后每次都将其恢复为开发模式。我试过了gulp-inject gulp-replace。一切正常，但为此我必须再次恢复生产模式。

标签： gulp

解决方案

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

推荐阅读