gulp分享文档

Grunt--I/O操作： 读取A → A.a() → 写出A → 读取A → A.b() → 写出A;

gulp--数据流：读取A → A.a() → A.b() → 写出A.

Part① 构建gulp

安装

npm install --global gulp   //全局安装
npm install --save-dev      //项目内安装

gulp官网

四个接口

gulp.task();    //自定义任务
gulp.src();		//引入文件
gulp.dest();	//导出文件
gulp.watch();	//监听文件变化，调用任务

配置文件gulpfile.js

//引入插件
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('build:css', function() {
    gulp.src(['../css/less/*.less',
        '../css/less/**/*.less',
        '!../css/less/test.less'  //排除文件
        ])
        .pipe(less().on('error', function (e){
            console.error(e.message);
            this.emit('end');
        }))
        .pipe(gulp.dest('../css'))
});

gulp.watch(['../css/less/*.less','../css/less/**/*.less'], ['build:css']);
gulp.task('default', ['build:css', 'watch']);

glob文件路径匹配详细文档

运行：

//运行default任务
gulp
//单独运行某个任务
gulp built:css

Part② 常用插件

插件

npm install gulp-less --save-dev //插件安装，同步到拓展程序列表

插件库

package.json

{
  "name": "budiuhuanxin",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-css-spriter": "^0.3.3",
    "gulp-css-spritesmith": "0.0.5",
    "gulp-header": "^1.7.1",
    "gulp-jshint": "^2.0.0",
    "gulp-less": "^3.0.5",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.5.3",
    "jshint": "^2.9.2",
    "jshint-stylish": "^2.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

常用插件（脑图）

gulp-plumber : 监测工作流，报错，防止遇到错误时直接退出gulp。

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');

gulp.task('build:css', function() {
    gulp.src(['../css/less/*.less',
        '../css/less/**/*.less',
        '!../css/less/test.less'  //排除文件
        ])
    	.pipe(plumber())
        .pipe(less().on('error', function (e){
            console.error(e.message);
            this.emit('end');
        }))
        .pipe(gulp.dest('../css'))
});

gulp-rev : 文件名添加版本号，html更新引用

var rev = require('gulp-rev'); //添加文件版本号
var revCollector = require("gulp-rev-collector");//修改html文件引用

gulp.task('build:js', function() {
    gulp.src(['src/js/*.js'])
        .pipe(plumber())
        .pipe(uglify())   //压缩
        .pipe(addMin('dest/js/record.json', '.min'))
        .pipe(rev())  //set hash key
        .pipe(gulp.dest('dest/js/')) //文件导出
        .pipe(rev.manifest()) //set hash key json
        .pipe(gulp.dest('dest/js')); //dest hash key json
});

gulp.task('rev', function () {
    return gulp.src(['dest/js/rev-manifest.json','src/html/*.html'])
        .pipe(revCollector({
            replaceReved: true,
        }))
        .pipe(gulp.dest('dest/html'));
});

gulp-autoprefixer：css自动前缀

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function(){
    gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'], //浏览器版本
            cascade: false   //未压缩时是否不换行
        }))
        .pipe(gulp.dest('dest/style'))
});

gulp-css-spritesmith：根据css文件自动生成雪碧图

var cssSprite = require('gulp-css-spritesmith'); //雪碧图

//雪碧图生成
gulp.task('autoSprite', function() {
    var file_data = [
        //每个数组表示需要编译的文件和对应切片图所在位置
        ['../css/indexBody.css', 'index-body'],
        [['../css/budiuNavbar.css','../css/budiuBottom.css'], 'index-layout'],
        ['../css/goods.css', 'goods'],
        ['../css/widget_chat.css', 'widget_chat']
    ];

    file_data.forEach(function(item, index, array) {
        gulp.src(item[0])
        .pipe(plumber())
        .pipe(cssSprite({
            // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
            imagepath: ('../images/' + item[1]),
            // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
            spritedest: '../images/sprite',
            // 替换后的背景路径，默认 ../images/
            spritepath: '../images/sprite',
            padding: 5
        }))
        .pipe(gulp.dest('../css'));
    })
});

gulp-jshint：js语法检查工具

var jshint = require('gulp-jshint');    //js语法检查工具
var stylish = require('jshint-stylish'); //后台提醒样式

gulp.task('build:js', function() {
    gulp.src(['../js/src/*.js'])
        .pipe(plumber())
        .pipe(jshint())   //语法检查
        .pipe(jshint.reporter(stylish))
        .pipe(uglify())   //压缩
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('../js'))
        .pipe(reload({stream: true}));  //自动刷新
});

Part③ 插件开发

官方教程

基本原则：

1. 你的插件不应该去做一些现有 node 模块已经能很容易做到的事情(删除文件～)
2. 你的插件应该只做一件事，并且做好。（比如：一个 JS 压缩插件不应该有一个加头部的选项）
3. 你的插件不能去做一些其他插件做的事：（不应该去拼接，用 gulp-concat 去做，不应该去增加尾部，用 gulp-footer 去做）
4. file.contents 的类型需要总是在输入输出中保持一致

插件开发两种处理方式

buffer：专门存放二进制数据的缓冲区；

stream： 文件流式数据（实际上属于buffer的一个特殊封装），适合用于处理大文件。

through2

var through = require('through2');
module.exports = function (options) {
    return through.obj(function (file, enc, cb) {
        // 主体实现忽略若干行
    });
};

File封装

var File = require('vinyl');

var coffeeFile = new File({
  cwd: "/",
  base: "/test/",
  path: "/test/file.coffee",
  relative: "file.coffee",
  contents: new Buffer("test = 123")
});

案例

实现功能：为js文件名添加指定后缀，记录与源文件名的对应关系，并在html中更新引用文件名。

var gutil = require('gulp-util');
var through = require('through2');
var PluginError = gutil.PluginError;
var fs = require('fs');
var _ = require('underscore');

var PLUGIN_NAME = 'gulp-addSuffix';

function refreshRecord(recordPath, data) {
	fs.open(recordPath, 'a+', function(err, fd){
		if(err) throw err;

		var oldDataObj = null;
		var oldData = fs.readFileSync(recordPath, 'utf-8');

		if (oldData.length === 0) {
			oldDataObj = {};
		} else {
			oldDataObj = JSON.parse(oldData);
		}
		var files = _.keys(data);
		files.forEach(function(key, n, arr) {
			oldDataObj[key] = data[key];
		});
		var buffer = new Buffer(JSON.stringify(oldDataObj));
		fs.write(fd, buffer, 0, buffer.length, 0, function(err, written, buffer){
			if (err) {throw err}
		});
	});
};

//js 文件添加后缀并输出记录
var plugin = function(recordPath, insertString) {
	if (!recordPath) {
		this.emit('error', new PluginError(PLUGIN_NAME, ' missing path of record file'));
	} else if (!insertString) {
		this.emit('error', new PluginError(PLUGIN_NAME, ' missing insert content'));
	}

	return through.obj(function (file, enc, cb) {
		if (file.isNull()) {
			this.push(file);
			return cb();
		}

		if (file.isStream()) {
			this.emit('error', new PluginError(PLUGIN_NAME, 'Streaming not supported'));
			return cb();
		}
		var oldName = file.relative;
		var arr = oldName.split('.');
		var newName = arr[0] + insertString + '.' + arr[1];
		file.path = file.base + newName;
		var record = {};
		record[oldName] = newName;
		refreshRecord(recordPath, record);

		this.push(file);
		cb();
	});
}
//修改html引用路径
plugin.html = function(recordPath) {
	return through.obj(function(file, enc, cb) {
		if (file.isNull()) {
			this.push(file);
			return cb();
		}
		if (file.isStream()) {
			this.emit('error', new PluginError(PLUGIN_NAME, 'Streaming not supported'));
			return cb();
		}
		var fileData = file.contents.toString('utf-8');
		var recordData = fs.readFileSync(recordPath,'utf-8');

		if (recordData.length === 0) {
			this.push(file);
			cb();
		} else {
			var recordObj = JSON.parse(recordData);
			var keys = _.keys(recordObj);
			keys.forEach(function(item, n, arr) {
				var reg = new RegExp(item, 'g');
				fileData = fileData.replace(reg, recordObj[item]);
			});
			file.contents = new Buffer(fileData);
			this.push(file);
			cb();
		}
	});
}

module.exports = plugin;