javascript 의 gulp 플러그 인 을 어떻게 만 듭 니까?
3316 단어 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 고급 기술
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
작업 러너 빈 템플릿 (Grunt · Gulp)WEB 사이트제작 태스크 러너의 빈 템플릿을 만들었습니다. 라고 하는 것을 이전 만들었습니다만 이번은 구체적인 컴파일용 플러그인은 포함하지 않고 아래 태스크 러너 플로우를 Grunt·Gulp 양쪽에서 구현했습니다. ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.