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;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。