Gulp Env và Preprocess

Trong Grunt tôi đã sử dụng một plugin gọi là env. Điều đó sẽ cho phép tôi xác định một môi trường trong xây dựng cụ thể. Tôi đã có 3 bản dựng. Một là DEV sẽ sử dụng tất cả các tệp được phân tách riêng lẻ. PROD sẽ concat tất cả mọi thứ và RELEASE sẽ concat và uglify. Tôi đang tìm cách làm tương tự ở Gulp. Tôi thấy một tiền xử lý cho Gulp nhưng không có gì để xác định môi trường.Gulp Env và Preprocess

Câu hỏi là. Tôi có thể làm gì? Rõ ràng là tôi không muốn định nghĩa tất cả các tệp JS mọi lúc, và tôi không muốn 3 trang HTML khác nhau với các thẻ script khác nhau.

Trong HTML của tôi, tôi sẽ có một cái gì đó như thế này:

<!-- @if NODE_ENV == 'DEVELOPMENT' --> 
<script src="js/example1.js" type="text/javascript"></script> 
<script src="js/example2.js" type="text/javascript"></script> 
<script src="js/example3.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'PRODUCTION' --> 
<script src="js/project.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'RELEASE' --> 
<script src="js/project.min.js" type="text/javascript"></script> 
<!-- @endif -->

Và plugin grunt tôi sẽ trông như thế này:

env: { 
    dev: { 
     NODE_ENV: 'DEVELOPMENT' 
    }, 
    prod: { 
     NODE_ENV: 'PRODUCTION' 
    }, 
    release: { 
     NODE_ENV: 'RELEASE' 
    } 
}, 
preprocess: { 
    options: { 
     context: { 
      name: '<%= pkg.outputName %>', 
      version: '<%= pkg.version %>', 
      port: '<%= pkg.port %>' 
     } 
    }, 
    dev: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    prod: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    release: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    } 
},

Nguồn

2014-04-16 Chester Rivas

Sau đây là cách tôi đã làm xong những gì tôi nghĩ rằng bạn muốn. Tôi đã thiết lập một thư mục chứa các trang html để được xử lý trước.

Trong thư mục đó tôi có các thư mục tương ứng với mỗi trang nơi tôi lưu trữ các đoạn html và tệp json.

Mỗi tệp JSON có các biến xác định nội dung trang cho một trang cụ thể.

Ví dụ: giả sử trang của tôi là index.html. Có vẻ như sau:

<html> 
    <head> 
     ... Meta stuff title etc ... 
     <!-- @ifdef pagecss1 --> 
     <link href="<!-- @echo pagecss1 -->" rel="stylesheet"> 
     <!-- @endif --> 
     <!-- @ifdef pagecss2 --> 
     <link href="<!-- @echo pagecss2 -->" rel="stylesheet"> 
     <!-- @endif --> 
    </head> 
     /// so on - same stuff with scripts at bottom

Trong tệp JSON của tôi cho trang đó, tôi có pagecss1 xác định hay không.

Sau đó, tôi sử dụng gulp.watch.

Tôi không muốn viết toàn bộ nội dung, nhưng bản cập nhật là mỗi khi có bất kỳ tệp nào trong thư mục con thay đổi chức năng chặn biến ngữ cảnh chung hiện có và đọc tệp JSON cho trang đó. Sau đó, tôi sử dụng node.util._extend để ghi đè các biến với các biến cụ thể của trang. Sau đó tôi chuyển đối tượng đã thay đổi đến nhiệm vụ tiền xử lý làm bối cảnh. Đó là tất cả ánh sáng nhanh chóng và trả về một cuộc gọi lại mà ganeload biết trang nào để tải lại.

Tôi đã viết bài này trên thiết bị di động, vì vậy tôi có thể quay lại để chỉnh sửa cho rõ ràng, nhưng giải quyết câu đố này đã tiết kiệm cho tôi một lượng thời gian và công sức đáng kinh ngạc.

Nguồn

2014-06-06 18:41:43 user1167442

Nhờ các plugin ngụm dữ liệu, điều này đã được đơn giản hóa rất nhiều. – user1167442

Bạn có lẽ nên sử dụng ngụm-preprocess và làm công cụ như thế này trong ngụm

var preprocess = require('gulp-preprocess'); 
.pipe(preprocess({context: { NODE_ENV: 'PRODUCTION', RELEASE_TAG: '2.6.4', DEBUG: false}}))

với các công cụ như thế này trong html của bạn

<!-- @if NODE_ENV='DEVELOPMENT' --> 
    <a href="test?v<!-- @echo RELEASE_TAG -->" /> 
<!-- @endif -->

Nguồn

2014-11-07 17:33:44

Gulp Env và Preprocess

Trả lời

Các vấn đề liên quan