摘要:承接前一篇做一個合格的前端,自動化構(gòu)建工具入門教程故而整理了如下插件資源大全。接下來我會逐一開源觀點網(wǎng)開發(fā)過程中的前后端技術(shù),如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。
承接前一篇《做一個合格的前端,gulp自動化構(gòu)建工具入門教程》故而整理了如下gulp插件資源大全。
**【我的新作觀點網(wǎng):http://www.guandn.com (觀點網(wǎng)是一個獵獲新奇、收獲知識、重在獨立思考的網(wǎng)站)。
PS:接下來我會逐一開源觀點網(wǎng)開發(fā)過程中的前后端技術(shù),如:lucene全文索引、自定義富文本編輯器、圖片上傳壓縮水印等等。】**
之前我也整理過一篇《javascript功能插件大集合》,有小伙伴留言說”能有鏈接就好了“,因此這次整理gulp相關(guān)資料的時候,特意錄入了插件地址,方便小伙伴們查找學(xué)習(xí)。
通用資源
官網(wǎng)
Github庫
插件注冊
NPM模塊
插件黑名單
官方文檔
快速開始
API文檔
CLI 文檔
開始寫一個插件
使用訣竅
組織
StackOverflow
Twitter
Gulp入門
使用Gulp構(gòu)建前端工程
通過Gulp.js輕松自動化構(gòu)建你的前端工程
Gulp,讓前端工程可視化
Gulp.js是什么?
使用Gulp在你的HTML中直接插入Scripts和Styles標(biāo)簽
5節(jié)課學(xué)會使用Gulp.js
我是怎樣擺脫前端工程的困擾的?
第一次開始Gulp Task
為什么你不自己寫一個Gulp插件?
6個最好的從根本改善你的開發(fā)經(jīng)驗的Gulp實戰(zhàn)練習(xí)
Gulp初學(xué)者教程
Gulp 4 入門
遷移到Gulp 4的例子
Gulp 4: 新的task執(zhí)行系統(tǒng) - gulp.parallel 和 gulp.series
Gulp with Browserify
Gulp + Browserify, the Gulp-y Way
Gulp + Browserify
快速構(gòu)建Browserify和Watchify
Gulp with Angular
Angular工程需要什么 - Gulp能提供什么
Gulp with Angular and Browserify
使用 Gulp, Node and Browserify構(gòu)建先進(jìn)的 AngularJS工程結(jié)構(gòu)
Gulp with React and Browserify
Browserify、Gulp 和 React
Taking React to the Next Level: Mixins, Gulp, and Browserify
Gulp with Ember
使用Gulp.js改進(jìn)你的Ember.js工作流
其他資源
Gulp 備忘錄
Gulp清單
gulp插件部分
一、編譯
gulp-sass - 通過 libsass將Sass編譯成 CSS
gulp-ruby-sass - 通過 Ruby Sass將Sass編譯成CSS
gulp-compass - 通過 Ruby Sass和CompassSass編譯成CSS
gulp-less - Less編譯成 CSS.
gulp-stylus - Stylus 編譯成 CSS.
gulp-postcss - Pipe CSS 通過 PostCSS processors with a single parse.
gulp-coffee - Coffeescript 編譯成 JavaScript.
gulp-typescript - TypeScript編譯成JavaScript.
gulp-react - Facebook React JSX 模板編譯成JavaScript.
webpack-stream - 將webpack集成在Gulp中使用。
gulp-babel - ES6編譯成ES5 通過 babel.
gulp-traceur - ES6編譯成ES5 通過 Traceur.
gulp-regenerator - ES6編譯成ES5 通過 Regenerator.
gulp-myth - Myth - a polyfill for future versions of the CSS spec.
二、合并
gulp-concat - 合并文件.
三、壓縮
gulp-clean-css - 壓縮 CSS 通過 clean-css.
gulp-csso - 壓縮 CSS 通過 CSSO.
gulp-uglify - 壓縮 JavaScript 通過 UglifyJS2.
gulp-htmlmin - 壓縮 HTML 通過 html-minifier.
gulp-minify-html - 壓縮 HTML 通過 Minimize.
gulp-imagemin - 壓縮 PNG, JPEG, GIF and SVG 圖片 通過 imagemin.
gulp-svgmin - 通過Gulp壓縮 SVG 文件
四、優(yōu)化
gulp-uncss - 移除未使用的CSS選擇器通過 UnCSS.
gulp-css-base64 - 將CSS文件中所有的資源(有url()聲明的)變成base64-encoded 數(shù)據(jù)的URI字符串
gulp-svg2png - 將SVGs轉(zhuǎn)換成PNGs
gulp-responsive - 生成不同尺寸的圖片
gulp-svgstore -將svg files 合并成一個通過 元素
gulp-iconfont - 通過SVG icons創(chuàng)建 icon fonts
五、資源注入
gulp-useref - 解析HTML文件中特殊標(biāo)簽里面的script或style標(biāo)簽,合并成一個script或css文件,并替換。
gulp-inject - 將指定的css或js文件以標(biāo)簽的形式插入到HTML中的指定標(biāo)志內(nèi)。
wiredep - 將Bower依賴自動注入HTML文件中。
六、模板
gulp-angular-templatecache - 在$templateCache中聯(lián)系并注冊AngularJS模板
gulp-jade - Jade 轉(zhuǎn)換成 HTML.
gulp-handlebars - Handlebars模板轉(zhuǎn)換成 JavaScript.
gulp-hb - Handlebars 模板轉(zhuǎn)換成 HTML.
gulp-nunjucks - Nunjucks模板轉(zhuǎn)換成JavaScript.
gulp-dustjs - Dust模板轉(zhuǎn)換成JavaScript.
gulp-riot - Riot模板轉(zhuǎn)換成JavaScript.
gulp-markdown - Markdown → HTML.
gulp-template - Lodash 模板轉(zhuǎn)換成JavaScript.
gulp-swig - Swig模板轉(zhuǎn)換成HTML.
gulp-remark - Gulp plugin for [remark]的Gulp插件(https://github.com/wooorm/rem... 通過插件處理markdown
七、代碼校驗
gulp-csslint - 通過CSSLint自動校驗CSS.
gulp-htmlhint - 通過HTMLHint校驗HTML.
gulp-jshint - 通過JSHint發(fā)現(xiàn)錯誤和潛在的問題.
gulp-jscs - 通過jscs檢查JavaScript代碼風(fēng)格.
gulp-coffeelint - 一種用來保證CoffeeScript代碼風(fēng)格統(tǒng)一的檢查。
gulp-tslint - gulp的TypeScript代碼校驗插件.
gulp-eslint - ECMAScript/JavaScript代碼校驗.
gulp-w3cjs - 通過w3cjs檢驗HTML.
gulp-lesshint - 通過lesshint校驗LESS.
八、實時加載
browser-sync - 保證多個瀏覽器或設(shè)備網(wǎng)頁同步顯示 (recipes).
gulp-livereload - Gulp的實時加載插件.
九、緩存
gulp-changed - 僅讓發(fā)生改變的文件通過.
gulp-cached - 一個簡單的文件內(nèi)存緩存.
gulp-remember - 記憶并回收通過了的文件.
gulp-newer - 只讓新的源碼通過.
十、流控制
merge-stream - 合并多個流到一個插入的流.
streamqueue - 逐漸輸入隊列的流.
run-sequence - 按要求運行一些依賴的Gulptask.
gulp-if - 按照條件運行task.
十一、日志
gulp-notify - Gulp的通知插件.
gulp-size - 顯示你的項目的大小.
gulp-debug - 通過調(diào)試文件流來觀察那些文件通過了你的Gulp管道.
十二、測試
gulp-mocha - 運行Mocha測試用例.
gulp-jasmine - 在Node.js中運行Jasmine 2 測試用例.
gulp-protractor - 為Protractor測試用例包裹Gulp.
gulp-coverage - 為Node.js覆蓋相對于運行的測試運行獨立的報告.
gulp-karma - 通過Gulp運行Karma測試用例.
gulp-ava- 通過Gulp運行AVA 測試用例.
十三、其他插件
gulp-util - 包含一系列有用插件.
gulp-plumber - 防止錯誤引起管道中斷Prevent pipe breaking caused by errors.
gulp-load-plugins - 自動加載Gulp插件.
main-bower-files - 構(gòu)建時自動獲取bower庫的文件.
autoprefixer - 解析CSS且根據(jù)規(guī)則添加瀏覽器兼容性前綴.
gulp-sourcemaps - 提供source map支持.
gulp-replace - Gulp的一個字符串替換插件.
gulp-rename - 輕松重命名文件.
gulp-rev - 在靜態(tài)文件名的后面添加hash值,如: unicorn.css → unicorn-d41d8cd98f.css.
del - 使用globs刪除文件/文件夾.
gulp-exec - 運行一個shell命令.
gulp-strip-debug - 除去javascript代碼中的console,alert,debugger聲明.
gulp-cssimport - 解析CSS文件,找到imports,將連接文件替換成imort聲明.
gulp-inline-css - 將HTML中的css屬性放到style標(biāo)簽中.
gulp-gh-pages - 將內(nèi)容發(fā)布到GiHub有頁面.
gulp-ng-annotate - 通過ng-annotate添加Angular依賴注入.
gulp-bump - 通過Gulp Bump任何semvar JSON版本.
gulp-file-include - 通過Gulp Include文件.
gulp-zip - 以ZIP格式壓縮文件.
gulp-git - 通過Gulp運行g(shù)it命令.
gulp-filter - 使用globbing過濾文件.
gulp-preprocess - 基于自定義內(nèi)容或環(huán)境配置預(yù)處理文件.
腳手架
一、模板
web-starter-kit - Google的Web Starter Kit.
gulp-plugin-boilerplate - 創(chuàng)建Gulp插件的開始模板.
polymer-starter-kit -Polymer 1.0 應(yīng)用的起點.
este - 同構(gòu)的web應(yīng)用最全面的React/Flux開發(fā)棧和開始模板.
mnml - 開發(fā)響應(yīng)式HTML5/Sass項目的最小開始模板.
kraken 一個輕量級的、移動端優(yōu)先的前端開發(fā)開始模板.
angularjs-gulp-browserify-boilerplate - 一個使用AngularJS, Sass, gulp, 和 Browserify技術(shù)的開始模板.
hapi-ninja - 一個使用Node.js, Hapi, and Swig技術(shù)的開始模板.
laravel-5-boilerplate - 一個Laravel 5 開始模板.
react-starterkit - 包含react-router, Reflux, jest, webpack, gulp and Stylus的React開始模板.
二、Yeoman生成器
generator-gulp-webapp - A 一個流行的web應(yīng)用的gulp生成器.
generator-gulp-angular - 使用Gulp的AngularJS 的Yeoman生成器.
generator-react-gulp-browserify - 一個React庫的Yeoman生成器,包含gulp, Browserify, Browsersync and Bootstrap.
generator-node-gulp - 一個Node.js模塊生成器,包含gulp和 Mocha.
generator-gulp-bootstrap - 一個包含Bootstrap, gulp 和libsass的Yeoman生成器·.
generator-angulpify - 一個包含AngularJS, gulp和Browserify的Yeoman生成器.
generator-ionic-gulp - 一個Ionic工廠的Yeoman生成器.
generator-gulp-plugin-boilerplate -一個輸出 gulp plugin boilerplate的腳手架.
generator-jekyllized - 一個包含gulp, Sass, AutoPrefixer,資源優(yōu)化,緩存等的Jekyll工作流.
三、其他
elixir - 一個為你的應(yīng)用定義基本的gulp任務(wù)的干凈、靈活的API.
gulp-app - 將Gulp作為一個應(yīng)用(OS X).
lmn-gulp-tasks - gulp任務(wù)的單元測試示例.
gulp-chef - 一個優(yōu)雅的、簡單的重復(fù)使用gulp task的方法.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/92600.html
摘要:我的新作觀點網(wǎng)觀點網(wǎng)是一個獵獲新奇收獲知識重在獨立思考的網(wǎng)站,它前端的壓縮合并命名等就使用了自動化構(gòu)建技術(shù),很小巧使用起來很舒服。一什么是是一個自動化構(gòu)建工具開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。故而在當(dāng)前文件夾新建文件備用。 我的新作觀點網(wǎng)http://www.guandn.com (觀點網(wǎng)是一個獵獲新奇、收獲知識、重在獨立思考的網(wǎng)站),它前端js、css的壓縮、合并、m...
摘要:,大家好,很榮幸有這個機(jī)會可以通過寫博文的方式,把這些年在后端開發(fā)過程中總結(jié)沉淀下來的經(jīng)驗和設(shè)計思路分享出來模塊化設(shè)計根據(jù)業(yè)務(wù)場景,將業(yè)務(wù)抽離成獨立模塊,對外通過接口提供服務(wù),減少系統(tǒng)復(fù)雜度和耦合度,實現(xiàn)可復(fù)用,易維護(hù),易拓展項目中實踐例子 Hi,大家好,很榮幸有這個機(jī)會可以通過寫博文的方式,把這些年在后端開發(fā)過程中總結(jié)沉淀下來的經(jīng)驗和設(shè)計思路分享出來 模塊化設(shè)計 根據(jù)業(yè)務(wù)場景,將業(yè)務(wù)...
摘要:整理的一些實用的類網(wǎng)站及工具。鏈接云適配有時候我們做出的網(wǎng)站沒有用到響應(yīng)式布局,也可能我們的網(wǎng)站的像素寬度已經(jīng)規(guī)定成具體的多少像素了。同時提供多個開放,功能實用,非常強(qiáng)大。 整理的一些實用的IT類網(wǎng)站及工具。 1.聚合數(shù)據(jù) 大家在開發(fā)過程中,可能會用到各種各樣的數(shù)據(jù),想找一些接口來提供一些數(shù)據(jù)。比如天氣預(yù)報查詢,火車時刻表查詢,彩票查詢,身份證查詢等等。有了這個接口,直接調(diào)用即可。各種...
摘要:特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會及時更新,平時業(yè)務(wù)工作時也會不定期更...
閱讀 1815·2023-04-26 01:55
閱讀 1078·2021-09-30 09:47
閱讀 1673·2019-08-30 15:54
閱讀 740·2019-08-30 15:53
閱讀 692·2019-08-30 15:52
閱讀 1133·2019-08-30 15:44
閱讀 2409·2019-08-30 14:06
閱讀 1057·2019-08-29 16:39