Gulp: 플러그인 작성 시작

이전에 구덩이를 파고gulp 플러그인을 써서 입문하는 과학 보급문을 작성하려고 했는데 그 후에 붓을 대지 않았다. 왜냐하면 Stream이라는 물건을 잘 설명해야 할지 몰랐기 때문이다. 왜냐하면gulp 플러그인의 실현은 grunt 플러그인의 실현처럼 직관적이지 않기 때문이다.
좋아, 그래서 단도직입적으로 하기로 했어.플러그인 예는 다음과 같습니다.https://github.com/chyingp/gulp-preprocess
앞에 쓰다
다음 gruntfile를 살펴보자. 필자가 방금 쓴 Gulp 플러그인gulp-preprocess이 쓰여 있다.알았어, npm publish에서 발견했어. 몇 달 전에 뺏겼어.왜 일요일 저녁에http://npmjs.org/package/태그가 안 나왔어요.
이 플러그인은preprocess라는 플러그인을 기반으로 하고 있으며, 플러그인 사용 방법은 스스로 고쳐 주십시오.본고는gulp-preprocess라는 플러그인을 어떻게 실현하는지 설명한다

var gulp = require('gulp'), preprocess = require('gulp-preprocess'); gulp.task('default', function() { gulp.src('src/index.html') .pipe(preprocess({USERNAME:'     '})) .pipe(gulp.dest('dest/')); }); 

실전에 들어가다
키 코드
우리는 가장 관건적인 몇 줄의 코드를 보았다.위에서 보듯이 위의preprocess()의 역할은 맞춤형 Object Stream을 되돌려주는 것이다. 이것은gulp의 흐름 조작을 실현하는 데 필수적이며 다른gulp 플러그인도 대동소이하다.
gulp-preprocess/index.js

module.exports = function (options) { return through.obj(function (file, enc, cb) { //           }); }; 

이어서 구체적으로 실현해 보자.사실 코드가 짧아요.
의존을 끌어들이다
우선 플러그인 의존항을 도입합니다.여기에서:

gutil:gulp의 통일된 규범에 따라 오류 로그를 인쇄

through2: Node Stream의 간단한 봉인, 체인 흐름 조작을 더욱 간단하게 하기 위한 목적

preprocess: 텍스트 프로세서, 주로 텍스트 교체

'use strict'; var gutil = require('gulp-util'); var through = require('through2'); var pp = require('preprocess'); 

핵심 논리
그 다음으로 정의gulp-preprocess의 주체 코드.맞아, 바로 아래에 있는 이렇게 짧은 코드야.코드 구조도 비교적 명확하니 다음은 간단하게 분해 소개를 하겠습니다.

module.exports = function (options) { return through.obj(function (file, enc, cb) { if (file.isNull()) { this.push(file); return cb(); } if (file.isStream()) { this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported')); return cb(); } var content = pp.preprocess(file.contents.toString(), options || {}); file.contents = new Buffer(content); this.push(file); cb(); }); }; 

핵심 코드 분해
아니면 코드를 직접 올리고 관건적인 위치에 주석을 달아라.through2에 익숙하지 않은 어린이 신발은 참고할 수 있습니다.

module.exports = function (options) { return through.obj(function (file, enc, cb) { //       ，      ，       ，     .pipe() if (file.isNull()) { this.push(file); return cb(); } //        Stream      ，     if (file.isStream()) { this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported')); return cb(); } //           ，    preprocess         //           ，   Buffer   var content = pp.preprocess(file.contents.toString(), options || {}); file.contents = new Buffer(content); //            ，      through2  API this.push(file); cb(); }); }; 

뒤에 쓰다
gulp 플러그인 내부에서 실현되는 원리를 설명하는 것은 쉬운 일이 아니다. 실현이 비교적 복잡하기 때문에 우선 버퍼, 스트림에 대해 어느 정도 알아야 한다. 노드가 노출된 API를 통해 스트림을 어떻게 맞춤형화하는지 포함한다.필자의 또 다른 수필인'gulp.src() 내부 실현 탐구'를 참고할 수 있다. 비록 아주 작은 부분만 이야기했지만.