貢獻gulp外掛程式兩枚

2021-06-28 00:44:50 字數 1193 閱讀 8012

最近將專案的構建工具換成了gulp.js,實在受不了ant了,也沒打算考慮grunt。具體為啥選gulp,最主要的原因還是討厭寫配置。

編寫構建指令碼過程中發現有些功能都沒有現成外掛程式可用,乾脆自己寫了得了。

我們做前端專案可能會面對如下兩種場景:

有些頁面(比如**登入頁)指令碼並不多,為了減少請求不會引用外部指令碼,而改用行間指令碼。但這樣有個問題,行間指令碼沒辦法壓縮。

樣式檔案中引用的位址為了防止快取,需要加上版本號。手工改實在是太low了,另外,普通的將日期作為版本號的方式也不妥當。

針對上面兩種場景,我寫了兩個外掛程式來實現對應功能,分別是gulp-minify-inline-scripts和gulp-make-css-url-version。用法很簡單:

gulp-minify-inline-scripts

var minifyinline = require('gulp-minify-inline-scripts');

gulp.task('minify', function() );

gulp-make-css-url-version

var makeurlver = require('gulp-make-css-url-version');

gulp.task('stylesheets', function() );

gulp-make-css-url-version預設是取檔案的md5值作為版本號。

其實編寫gulp.js外掛程式是件十分容易的事,明確外掛程式的功能,按照下面的模板,分分鐘就可以來上乙個。

var gutil = require('gulp-util');

var through = require('through2');

module.exports = function (options) ;

var self = this;

if (file.isnull())

if (file.isstream())

var html = file.contents.tostring();

/** replace html func

*/file.contents = new buffer(html);

self.push(file);

cb();

});};

gulp常用外掛程式

本人就職於一家網際網路小公司,根據自己的專案紀錄一下常用的gulp外掛程式,專案不是很大!文章目錄 1.gulp load plugins 2.yargs 3.del 4.gulp filter 5.gulp header 6.run sequence 7.gulp uglify 8.gulp mi...

Gulp及其外掛程式介紹

gulp是乙個前端的自動化構建工具,可以完成對前端資源的壓縮 合併 格式化以及版本管理,也可以監聽前端資源的變化去做一些自動化的構建工作 gulp也是乙個基於nodejs的自動任務執行器,所以使用gulp的時候要有一套node的環境,這裡對node的安裝就不再贅述了。結合社群裡好多優秀的gulp外掛...

gulp常用外掛程式整理

1.gulp sass sass編譯 3.gulp autoprefixer 新增css3字首 4.gulp clean css 壓縮css 5.gulp include 檔案包含 6.gulp concat 檔案合併 7.del 檔案刪除 8.gulp uglify 壓縮js 9.gulp.spr...