gulp 플러그인 작성
gulp
를 설명하고 간단한 플러그인 기능을 실현함으로써 어떻게 작성하는지 설명한다gulp
.gulp 플러그인 구조
//
var through = require('through2');
// gulp
// prefix_text:
module.exports = function gulp_prefix(prefix_text){
// stream , stream
var stream = through.obj(function(file, encoding, callback){
// stream
});
// stream
return stream;
};
gulp
의 주 함수는 stream
대상을 되돌려야 한다.stream
대상을 만드는 방법은 여러 가지가 있습니다. 여기서 우리는 through.obj()
를 사용하여 stream
대상을 만듭니다.through.obj()
를 호출할 때 들어오는 함수 매개 변수는 최종적으로 stream._transform
함수를 덮어씁니다. 이 함수를 어떻게 사용하는지 설명할 필요가 있습니다.transform._transform(file, encoding, callback)
stream
에서 받은 파일 데이터, 이 파일 형식은 세 가지가 있다. stream
: 흐르는 데이터, file.isStream()
로 판단할 수 있다buffer
: 이진 데이터, gulp.src
로 파일을 읽을 수 있는 기본값은 이 유형이다. file.isBuffer()
로 판단할 수 있다null
: 비어 있다. 데이터가 없다는 것을 나타내고 file.isNull()
로 판단할 수 있다stream
엔진에 우리가 처리했다고 알려 주세요.error: 오류 정보;생략 가능합니다.데이터: 파일 데이터로 file
파라미터를 전송하거나 undefined
;생략 가능합니다.자,
gulp
의 구조는 이렇게 간단합니다. 이제 간단한 플러그인을 작성하기 시작합니다. gulp-prefix
.gulp 플러그인 작성 시작
현재 우리는 모든 파일의 첫머리에 문자열 기능을 추가할 수 있는gulp 플러그인을 실현하고 플러그인을 쓰기 전에
package.json
을 만듭니다npm init
네임에 대해 물었을 때 다음과 같은 이름을 붙일 수 있습니다:
gulp-prefix
, 실행에 성공한 후 package.json
의 내용은 다음과 같습니다.{
"name": "gulp-prefix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
로컬에서 다음과 같은 내용의 플러그인 포털 파일
index.js
을 만듭니다.var through = require('through2');
module.exports = function gulp_prefix(prefix){
if(!prefix){
prefix = "";
}
var prefix = new Buffer(prefix);
var stream = through.obj(function(file, encoding, callback){
// file buffer
if(!file.isBuffer()){
return callback();
}
//
file.contents = Buffer.concat([prefix, file.contents]);
//
this.push(file);
// stream ,
callback();
});
return stream;
};
현재 플러그인의 디렉터리 구조는
.
├── index.js
├── package.json
이제 이 플러그인을 사용할 수 있습니다.
gulp
항목 아래 node_modules/gulp-prefix
디렉터리에 플러그인을 복사해서 작성하십시오. gulpfile.js
var gulp = require('gulp'),
prefix = require('gulp-prefix');
gulp.task("default", function(){
gulp.src("src/*.js")
.pipe(prefix("prefix data"))
.pipe(gulp.dest("js"));
});
실행
gulp
모든 js 파일 내용의 앞에
prefix data
문자열을 추가할 수 있습니다플러그인 테스트
많은 프로젝트가 단원 테스트를 필요로 하는 것처럼 우리가 개발
gulp
할 때도 테스트 기능이 필요합니다. 다음에 제가 방금 쓴 gulp-prefix
플러그인을 어떻게 테스트하는지 가르쳐 드리겠습니다.많은
gulp
에서 사용하는 테스트 도구는mocha
이다. 우선package.json
필드scripts
의 값test
을 mocha
으로 수정하고 수정package.json
은 다음과 같다.{
"name": "gulp-prefix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha"
},
"author": "",
"license": "ISC"
}
이렇게 하면 우리가
npm test
를 실행하면 mocha
테스트 도구를 실행할 수 있다.현재 로컬에서 테스트 스크립트test.js
를 만듭니다.var assert = require('assert');
var File = require('vinyl');
var prefix = require('./');
describe('gulp-prefix', function() {
it('prefix test', function(done) {
//
var file = new File({
contents: new Buffer('file data')
});
// prefix
var stream = prefix('prefix ');
// prefix
stream.write(file);
// a
stream.once('data', function(file) {
//
assert.equal(file.contents.toString('utf8'), 'prefix file data');
done();
});
});
});
테스트에 필요한 패키지 설치
npm install assert mocha through2 vinyl --save-dev
실행 테스트
[root@localhost gulp-prefix]# npm test
> [email protected] test /root/gulp-prefix
> mocha
gulp-prefix
✓ prefix test
1 passing (18ms)
웹 프런트엔드 개발 도구 설명
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.