javascript 의 gulp 플러그 인 을 어떻게 만 듭 니까?

3316 단어 gulp
옛날 에 우 리 는'gulp'수필 에서 자바 스 크 립 트 를 압축 하 는 것 을 예 로 들 어 gulp 를 어떻게 이용 하여 전단 자동 화 를 완성 하 는 지 상세 하 게 설명 했다.
다시 한 번 돌 이 켜 보면 그 당시 에는 gulp 를 빌 리 는 것 외 에 도 제3자 gulp 플러그 인'gulp-uglify'를 이용 하여 자바 스 크 립 트 파일 을 압축 하 는 목적 을 달성 했다.
코드 는 다음 과 같 습 니 다:

오늘 우리 의 중점 은 자신 도 gulp 플러그 인 을 실현 하 는 것 이다.
본문
사실,단순히 gulp 플러그 인 을 만 드 는 것 이 어렵 지 않다 면 through 2 나 through-glp 를 통 해 작성 할 수 있 습 니 다(through-glp 는 through 2 를 기반 으로 개발 되 었 습 니 다).
예 를 들 어,다음 에 작성 할 플러그 인(임시 이름 은 modify)을 원 합 니 다.html 파일 의{{...}을 지정 합 니 다.모두'Monkey 2 Dorie'로 바 꿉 니 다.
다음 과 같다.

다음은 through 2 와 through-glp 를 이용 하여 일일이 말씀 드 리 겠 습 니 다.
**through2**

'use strict'
var through2 = require('through2');
module.exports = modify;
function modify(){
 return through2.obj(function(file, encoding, cb){
 //      ,      ,       ,    pipe
 if(file.isNull()){
 console.log('isNull');
 this.push(file);
 return cb();
 }
 //      stream    ,    
 if(file.isStream()){
 console.log('isStream');
 this.emit('error');
 return cb();
 }
 //    ,    ,   Buffer  
 var content = versionFun(file.contents.toString());
 file.contents = new Buffer(content);
 //          ,   through2 API
 this.push(file);
 cb();
 });
}
function versionFun(data){
 return data.replace(/{{something}}/, ' Monkey 2 Dorie ');
}
**through-gulp**

'use strict'
var through = require('through-gulp');
module.exports = modify;
function modify(){
 var stream = through(function(file, encoding, callback){
 //      ,      ,       ,    pipe
 if(file.isNull()){
 console.log('file is null!');
 this.push(file);
 return callback(); 
 }
 //      stream    ,    
 if(file.isStream()){
 console.log('file is stream!');
 this.emit('error');
 return callback(); 
 }
 //    ,    ,   Buffer  
 var content = versionFun(file.contents.toString('utf-8'));
 file.contents = new Buffer(content, 'utf-8');
 this.push(file);
 callback();
 }, function(callback){
 console.log('    !');
 callback();
 });
 return stream;
}
function versionFun(data){
 return data.replace(/{{something}}/, ' Monkey 2 Dorie ');
}
상세 코드 참조github.
독 서 를 넓히다.
[1]、 through-gulp
[2]、 gulp 규범
[3]、 gulp 고급 기술
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!

좋은 웹페이지 즐겨찾기