Teach you to write Gulp plugin

In the past two years, the development of the front-end project soared. With Nodejs the shine, static file processing no longer requires additional language assistance. The two main tools are file-based grunt , stream-based gulp . Simply put, if only file processing is required, gulp absolutely preferred. If it is other file-dependent task management, such as testing ( karma , mocha ), it is recommended grunt .

First, gulp plugin development dependence

In terms of plug-in development difficulty, gulp is much lower than grunt. If you're only concerned with working with files and not on details, you need to rely on the implementation of the Nodejs Transform stream. It is possible to use the official recommended THROUGH2, but Through-gulp is recommended. The latter is based on the former, written for the gulp plug-in refinement optimization rewrite. Do not use through, this package time, long time without maintenance, and some of the features of the mock implementation, to Nodejs 0.10.x has been natively supported. If just want to learn how to write Gulp plugin, Through-gulp is more suitable.

Through-gulp:https://github.com/bornkiller/through-gulp
Through2:https://github.com/rvagg/through2.git
Through:https://github.com/dominictarr/through

Second, the use of Through-gulp Development Gulp Plugin

Dependency API

var through = require (' Through-gulp '); var stream = through (transformfunction, flushfunction);

Structure

plugin_name:sample var through = require (' Through-gulp '); Function sample () {  //create flow stream by through  var stream = through (function (file, encoding,callback) {      // The process file determines    if (File.isnull ()) {} if (    file.isbuffer ()) {     }    if (File.isstream ()) {}    //Just Pipe data Next, or just do nothing to the process file later in Flushfunction     //Never forget callback to indicate that T He file has been processed.       This.push (file);      Callback ();    },function (callback) {      //Just pipe data next, just callback to indicate that the stream ' s over
   
    this.push (something);      Callback ();    });   Returns the stream file return  stream;}; Exporting the plugin  module.exports = sample;
   

Over here

Through (function (file, encoding,callback) {}) discovers that file is an object that contains many of the following properties, but usually the File.path gets the file path, File.contents gets the file content

Use:

varGulp = require ('Gulp');varSample = require ('Sample'); Gulp.task ('Sample', function () {returnGULP.SRC (['source File']). PIPE (sample ()). Pipe (Gulp.dest ('File Destiny'))});

From the above we can see that the Through-gulp plug-in notation, is actually read the conversion stream, the storage stream, the export stream of a process (a file of a file in the past), if we do not need to export the stream to be chained, in fact, direct module.exports = Sample can be used directly one-way.

　　Take a look at the simple Gulp-pf-replace plugin, understanding the principle:

Gulp uses buffervar through = require ("Through-gulp") by default; Introducing the Gulp plugin module var fs = require ("FS"), var http = require ("http"), var request = require ("request"), var path = require ("path"); var Source = require (' Vinyl-source-stream ');  General stream conversion to gulp supported vinyl file format var gutil = require (' Gulp-util '); Gulp Multi-function plugin, can replace extension, log color log, template var chalk = require (' chalk '); Set the color Chalk.blue (' Hello world! ');  /Type judgment function Istype (type) {return function (o) {return Object.prototype.toString.crall (o) = = = ' [Object ' + type    + '] '; }}var isstring = Istype ("String"), var isobject = Istype ("Object"), var IsArray = Istype ("Array"); Gutil.log (' Stuff Happened ', ' really it did ', Gutil.colors.magenta (' 123 ')); the Var i=0;//gulp plug-in principle is that a stream enters and the stream finishes out function replace (modreplace ) {//Create stream streams with through var stream = through (function (file, encoding,callback) {//file As Object, containing Path,clone,pipe,inspect,    History,isnull,isdirectory and so on, commonly used is Path//console.log (IsObject (file));  Process file to determine if (File.isnull ()) {throw "NO files,please Check files!"  The}//buffer object can manipulate if (File.isbuffer ()) {//Get a single file Buffervar content = Modreplace (file.contents.toString ("Utf-8"));//cons Ole.log (contents); file.contents = new Buffer (content, "utf-8");//Can be converted to string buffer.tostring by Utf-8 ("//contents") = File.contents.toString ("Utf-8")}//stream stream is not operable, can read var content = File.isstream by Fs.readfilesync if (Modr ()) {///synchronously Eplace (Fs.readfilesync (File.path). toString ("Utf-8"));    file.contents = new Buffer (content, "utf-8"); }//Just pipe data next, or just do nothing to the process file later in Flushfunction//Never forget callback to IND       Icate the file has been processed.      This.push (file);  Callback ();    i++; },function (callback) {Gutil.log (gutil.colors.red (i), Gutil.colors.green ("has been processed!      "));      Just pipe data Next, just callback to indicate that the stream's Over//This.push (something);    Callback ();  }); Returns the stream file return stream;}; Export plugin module.exports = replace;

Use:

Gulp.task ("Pfdefault", function () {returnGULP.SRC ("./tianzun/*.+ (html|htm)", {buffer:true}). Pipe (Pfdefault (ypreplace)). Pipe (Gulp.dest (". /Out"));});//Replacement Methodfunction Ypreplace (data) {returnData.replace (/helloword/,"123")  }

The above annotation is more, should most people understand, here I will no longer explain.

Third, the use of THROUGH2 Development Gulp Plugin

The structure is as follows:

//THROUGH2 is a transform streams simple package for nodevarthrough = require ('THROUGH2');varGutil = require ('Gulp-util');varPluginerror =Gutil. Pluginerror;//ConstantsConstPlugin_name ='Gulp-prefixer'; function Prefixstream (prefixtext) {varstream =through ();  Stream.Write (Prefixtext); returnstream;}//plug-in level functions (processing files)function Gulpprefixer (prefixtext) {if(!Prefixtext) {    Throw NewPluginerror (Plugin_name,'Missing prefix text!'); } Prefixtext=NewBuffer (Prefixtext);//Pre-assigned//Create a stream channel for each file to pass through  returnthrough.obj (function (file, ENC, CB) {if(File.isnull ()) {//return empty filecbNULL, file); }    if(File.isbuffer ()) {file.contents=Buffer.concat ([Prefixtext, file.contents]); }    if(File.isstream ()) {file.contents=file.contents.pipe (Prefixstream (Prefixtext)); } CB (NULL, file); });};//exposure (export) plug-in main functionModule.exports = Gulpprefixer;

Recommended reading:

Gulp Thinking--gulp advanced skills Understanding gulp underlying processing is buffer, or vinyl file format stream

Writing Gulp Guidance

Through-gulp Plug-in

Teach you to write Gulp plugin