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)

file: stream에서 받은 파일 데이터, 이 파일 형식은 세 가지가 있다. stream: 흐르는 데이터, file.isStream()로 판단할 수 있다buffer: 이진 데이터, gulp.src로 파일을 읽을 수 있는 기본값은 이 유형이다. file.isBuffer()로 판단할 수 있다null: 비어 있다. 데이터가 없다는 것을 나타내고 file.isNull()로 판단할 수 있다

encoding: 인코딩 방식을 나타낸다. 일반적으로 사용하지 않아도 된다

callback(error,]data): 리셋 함수, 코드를 실행한 후에 이 함수를 호출해야 합니다. 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)

웹 프런트엔드 개발 도구 설명