Làm cách nào để chèn nội dung vào tệp trong khi xây dựng gulp?

Question

tôi quản lý để thực hiện nhiệm vụ của tôi sử dụng một plugin ngụm gọi gulp-insert như thế này:

gulp.task('compile-js', function() { 
    // Minify and bundle client scripts. 
    var scripts = gulp.src([ 
    srcDir + '/routes/**/*.js', 
    srcDir + '/shared/js/**/*.js' 
    ]) 
    // Sort angular files so the module definition appears 
    // first in the bundle. 
    .pipe(gulpAngularFilesort()) 
    // Add angular dependency injection annotations before 
    // minifying the bundle. 
    .pipe(gulpNgAnnotate()) 
    // Begin building source maps for easy debugging of the 
    // bundled code. 
    .pipe(gulpSourcemaps.init()) 
    .pipe(gulpConcat('bundle.js')) 
    // Buffer the bundle.js file and replace the appConfig 
    // placeholder string with a stringified config object. 
    .pipe(gulpInsert.transform(function (contents) { 
     return contents.replace("'{{{appConfigObj}}}'", JSON.stringify(config)); 
    })) 
    .pipe(gulpUglify()) 
    // Finish off sourcemap tracking and write the map to the 
    // bottom of the bundle file. 
    .pipe(gulpSourcemaps.write()) 
    .pipe(gulp.dest(buildDir + '/shared/js')); 

    return scripts.pipe(gulpLivereload()); 
}); 

Những gì tôi đang làm là đọc tập tin cấu hình ứng dụng của chúng tôi được quản lý bởi các module config trên NPM. Lấy tập tin cấu hình của chúng tôi từ mã phía máy chủ là một snap sử dụng var config = require('config');, nhưng chúng tôi là một ứng dụng một trang và thường xuyên cần truy cập vào các thiết lập cấu hình ở phía máy khách. Để làm điều đó, tôi đặt đối tượng config vào một dịch vụ Angular.

Đây là dịch vụ Góc trước khi xây dựng gulp.

angular.module('app') 
    .factory('appConfig', function() { 
    return '{{{appConfigObj}}}'; 
    }); 

Trình giữ chỗ nằm trong chuỗi để JavaScript hợp lệ cho một số plugin gulp khác xử lý tệp trước. Tiện ích gulpInsert cho phép tôi chèn cấu hình như thế này.

.pipe(gulpInsert.transform(function (contents) { 
    return contents.replace("'{{{appConfigObj}}}'", JSON.stringify(config)); 
})) 

Điều này có tác dụng nhưng hơi khó hiểu. Chưa kể rằng nó phải đệm toàn bộ tệp đi kèm để tôi có thể thực hiện thao tác. Có cách nào thanh lịch hơn để thực hiện điều tương tự không? Tốt nhất là cho phép luồng tiếp tục chảy trơn tru mà không phải đệm toàn bộ gói ở cuối? Cảm ơn!

Answer 1

Bạn đã kiểm tra gulp-replace-task?

Something như

[...] 
.pipe(gulpSourcemaps.init()) 
.pipe(replace({ 
    patterns: [{ 
    match: '{{{appConfigObj}}}', 
    replacement: config 
    }], 
    usePrefix: false 
}) 
.pipe(gulpUglify()) 
[...] 

Answer 2

Phải thừa nhận rằng, điều này cũng hơi khó hiểu, nhưng có thể tốt hơn một chút ... Tôi đang sử dụng envify và gulp-env trong dự án React. Bạn có thể làm một cái gì đó như thế này.

gulpfile.js:

var config = require('config'); 
var envify = require('envify'); 

gulp.task('env', function() { 
    env({ 
     vars: { 
      APP_CONFIG: JSON.stringify(config) 
     } 
    }); 
}); 

gulp.task('compile-js', ['env'], function() { 
    // ... replace `gulp-insert` with `envify` 
}); 

nhà máy:

angular.module('app') 
    .factory('appConfig', function() { 
    return process.env.APP_CONFIG; 
    });