gulp分享文档

时间 2019-11-17

原文原文链接

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

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

Part① 构建gulp

安装

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

gulp官网html

四个接口

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文件路径匹配详细文档java

运行：

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

Part② 经常使用插件

插件

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

插件库node

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③ 插件开发

官方教程git

基本原则：

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

插件开发两种处理方式

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

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

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中更新引用文件名。json

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;