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.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']);
运行：
//运行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插件.png
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③ 插件开发
基本原则：
- 你的插件不应该去做一些现有 node 模块已经能很容易做到的事情(删除文件～)
- 你的插件应该只做一件事，并且做好。（比如：一个 JS 压缩插件不应该有一个加头部的选项）
- 你的插件不能去做一些其他插件做的事：（不应该去拼接，用 gulp-concat 去做，不应该去增加尾部，用 gulp-footer 去做）
- 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;
