Grunt--I/O操作： 讀取A → A.a() → 寫出A → 讀取A → A.b() → 寫出A;
gulp--數(shù)據(jù)流：讀取A → A.a() → A.b() → 寫出A.
Part① 構(gòu)建gulp
安裝
npm install --global gulp //全局安裝
npm install --save-dev //項(xiàng)目內(nèi)安裝
四個(gè)接口
gulp.task(); //自定義任務(wù)
gulp.src(); //引入文件
gulp.dest(); //導(dǎo)出文件
gulp.watch(); //監(jiān)聽文件變化，調(diào)用任務(wù)
配置文件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']);
運(yùn)行：
//運(yùn)行default任務(wù)
gulp
//單獨(dú)運(yùn)行某個(gè)任務(wù)
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 : 監(jiān)測工作流姜钳，報(bào)錯(cuò)，防止遇到錯(cuò)誤時(shí)直接退出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 : 文件名添加版本號(hào)，html更新引用
var rev = require('gulp-rev'); //添加文件版本號(hào)
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/')) //文件導(dǎo)出
.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自動(dòng)前綴
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 //未壓縮時(shí)是否不換行
}))
.pipe(gulp.dest('dest/style'))
});
gulp-css-spritesmith：根據(jù)css文件自動(dòng)生成雪碧圖
var cssSprite = require('gulp-css-spritesmith'); //雪碧圖
//雪碧圖生成
gulp.task('autoSprite', function() {
var file_data = [
//每個(gè)數(shù)組表示需要編譯的文件和對(duì)應(yīng)切片圖所在位置
['../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背景圖源文件夾，只有匹配此路徑才會(huì)處理罪塔，默認(rèn) images/slice/
imagepath: ('../images/' + item[1]),
// 雪碧圖輸出目錄隅忿，注意，會(huì)覆蓋之前文件邦尊！默認(rèn) images/
spritedest: '../images/sprite',
// 替換后的背景路徑背桐，默認(rèn) ../images/
spritepath: '../images/sprite',
padding: 5
}))
.pipe(gulp.dest('../css'));
})
});
gulp-jshint：js語法檢查工具
var jshint = require('gulp-jshint'); //js語法檢查工具
var stylish = require('jshint-stylish'); //后臺(tái)提醒樣式
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})); //自動(dòng)刷新
});
Part③ 插件開發(fā)
基本原則：
- 你的插件不應(yīng)該去做一些現(xiàn)有 node 模塊已經(jīng)能很容易做到的事情(刪除文件～)
- 你的插件應(yīng)該只做一件事，并且做好蝉揍。（比如：一個(gè) JS 壓縮插件不應(yīng)該有一個(gè)加頭部的選項(xiàng)）
- 你的插件不能去做一些其他插件做的事：（不應(yīng)該去拼接链峭，用 gulp-concat 去做，不應(yīng)該去增加尾部又沾，用 gulp-footer 去做）
- file.contents 的類型需要總是在輸入輸出中保持一致
插件開發(fā)兩種處理方式
buffer：專門存放二進(jìn)制數(shù)據(jù)的緩沖區(qū)弊仪；
stream： 文件流式數(shù)據(jù)（實(shí)際上屬于buffer的一個(gè)特殊封裝）熙卡，適合用于處理大文件。
through2
var through = require('through2');
module.exports = function (options) {
return through.obj(function (file, enc, cb) {
// 主體實(shí)現(xiàn)忽略若干行
});
};
File封裝
var File = require('vinyl');
var coffeeFile = new File({
cwd: "/",
base: "/test/",
path: "/test/file.coffee",
relative: "file.coffee",
contents: new Buffer("test = 123")
});
案例
實(shí)現(xiàn)功能：為js文件名添加指定后綴励饵，記錄與源文件名的對(duì)應(yīng)關(guān)系驳癌，并在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;
