Tôi có thể sử dụng gulp để thay thế một chuỗi trong một tệp bằng cách nào?

Question

Tôi đang sử dụng gulp để uglify và làm cho sẵn sàng của tôi tập tin javascript cho sản xuất. Những gì tôi có là mã này:

var concat = require('gulp-concat'); 
var del = require('del'); 
var gulp = require('gulp'); 
var gzip = require('gulp-gzip'); 
var less = require('gulp-less'); 
var minifyCSS = require('gulp-minify-css'); 
var uglify = require('gulp-uglify'); 

var js = { 
    src: [ 
     // more files here 
     'temp/js/app/appConfig.js', 
     'temp/js/app/appConstant.js', 
     // more files here 
    ], 

gulp.task('scripts', ['clean-js'], function() { 
    return gulp.src(js.src).pipe(uglify()) 
     .pipe(concat('js.min.js')) 
     .pipe(gulp.dest('content/bundles/')) 
     .pipe(gzip(gzip_options)) 
     .pipe(gulp.dest('content/bundles/')); 
}); 

những gì tôi cần làm là để thay thế cho chuỗi:

dataServer: "http://localhost:3048", 

với

dataServer: "http://example.com", 

Trong tập tin 'temp/js/app/appConstant.js ',

Tôi đang tìm một số đề xuất. Ví dụ có lẽ tôi nên tạo một bản sao của tệp appConstant.js, thay đổi điều đó (không chắc chắn cách) và bao gồm appConstantEdited.js trong js.src?

Nhưng tôi không chắc chắn với gulp làm thế nào để tạo một bản sao của một tập tin và thay thế một chuỗi bên trong một tập tin.

Bất kỳ trợ giúp nào bạn đưa ra sẽ được đánh giá cao.

Answer 1

Đầu vào luồng Gulp, thực hiện tất cả các chuyển đổi và sau đó truyền đầu ra. Lưu các tập tin tạm thời ở giữa là AFAIK không thành ngữ khi sử dụng Gulp.

Thay vào đó, những gì bạn đang tìm kiếm là một cách trực tuyến để thay thế nội dung. Sẽ dễ dàng để viết một cái gì đó cho chính bạn, hoặc bạn có thể sử dụng một plugin hiện có. Đối với tôi, gulp-replace đã hoạt động khá tốt.

Nếu bạn muốn làm việc thay thế trong tất cả các file thật dễ dàng để thay đổi nhiệm vụ của bạn như thế này:

var replace = require('gulp-replace'); 

gulp.task('scripts', ['clean-js'], function() { 
    return gulp.src(js.src) 
     .pipe(replace(/http:\/\/localhost:\d+/g, 'http://example.com')) 
     .pipe(uglify()) 
     .pipe(concat('js.min.js')) 
     .pipe(gulp.dest('content/bundles/')) 
     .pipe(gzip(gzip_options)) 
     .pipe(gulp.dest('content/bundles/')); 
}); 

Bạn cũng có thể làm gulp.src chỉ trên các tập tin mà bạn mong đợi mô hình để nhảy vào và dòng họ tách biệt qua gulp-replace, hợp nhất nó với luồng gulp.src của tất cả các tệp khác sau đó.

Answer 2

Bạn cũng có thể sử dụng mô-đun gulp-string-replace quản lý bằng regex, chuỗi hoặc thậm chí chức năng.

Ví dụ:

Regex:

var replace = require('gulp-string-replace'); 

gulp.task('replace_1', function() { 
    gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace(new RegExp('@env@', 'g'), 'production')) 
    .pipe(gulp.dest('./build/config.js')) 
}); 

String:

gulp.task('replace_1', function() { 
    gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace('environment', 'production')) 
    .pipe(gulp.dest('./build/config.js')) 
}); 

Chức năng:

gulp.task('replace_1', function() { 
    gulp.src(["./config.js"]) // Every file allown. 
    .pipe(replace('environment', function() { 
     return 'production'; 
    })) 
    .pipe(gulp.dest('./build/config.js')) 
}); 

Answer 3

Tôi nghĩ rằng giải pháp đúng nhất là sử dụng mô-đun gulp-preprocess. Nó sẽ thực hiện các hành động bạn cần, tùy thuộc vào biến số PRODUCTION, được xác định hoặc không được xác định trong quá trình xây dựng.

Source code:

/* @ifndef PRODUCTION */ 
dataServer: "http://localhost:3048", 
/* @endif */ 
/* @ifdef PRODUCTION ** 
dataServer: "http://example.com", 
/* @endif */ 

Gulpfile:

let preprocess = require('gulp-preprocess'); 
const preprocOpts = { 
    PRODUCTION: true 
}; 

gulp.task('scripts', ['clean-js'], function() { 
    return gulp.src(js.src) 
    .pipe(preprocess({ context: preprocOpts })) 
    .pipe(uglify()) 
    .pipe(concat('js.min.js')) 
    .pipe(gulp.dest('content/bundles/')); 
} 

Đây là giải pháp tốt nhất vì nó cho phép bạn kiểm soát những thay đổi được thực hiện trong giai đoạn xây dựng.