我爱工程化 之 gulp 使用（一）
一、簡介
? ? ?gulp是前端自動化工具，壓縮、合并、預編譯檢查等等，它與grunt頻繁IO操作來消耗內存相比，它是使用的流的方式，我們可以簡稱為管道流（一端入，一端出，3通水，一個大桶，第一通在管道里面流吧，那邊大桶接著，第一桶流完，第二桶水馬上接上，直至三桶水全流完）
? ? ?功能：
? ? ? ? ? ?1、圖片（壓縮圖片支持jpg、png、gif）
? ? ? ? ? ?2、樣式 （支持sass 同時支持合并、壓縮、重命名）
? ? ? ? ? ?3、javascript （檢查、合并、壓縮、重命名）
? ? ? ? ? ?4、html （壓縮）
? ? ? ? ? ?5、客戶端同步刷新顯示修改
? ? ? ? ? ?6、構建項目前清除發布環境下的文件（保持發布環境的清潔）
? ? 為什么使用gulp比使用grunt快？? ? ? ?
? ? ? ? Grunt主要是以文件為媒介來運行它的工作流的，比如在Grunt中執行完一項任務后，會把結果寫入到一個臨時文件中，然后可以在這個臨時文件內容的基礎上執行其它任 ? ? ? ?務，執行完成后又把結果寫入到臨時文件中，然后又以這個為基礎繼續執行其它任務...就這樣反復下去。? ? ? ?
? ? ? ? Gulp是以stream為媒介的,它不需要頻繁的生成臨時文件，但要注意這個流里的內容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲著原始文件的路徑、文件名、內容等信息，
二、步驟說明
? ? 1、安裝nodejs；
? ? 2、基于node.js安裝并使用gulp
? ? ? ? * 全局安裝gulp
? ? ? ? * 在項目的根目錄下新建 package.json 文件
? ? ? ? * 在項目的根目錄下安裝gulp及相關需要的插件
? ? ? ? * 在項目根目錄下新建gulpfile.js
? ? ? ? * 運行gulp任務（兩種）
三、安裝Node及簡單命令介紹
? ? ?1.安裝node.js ? ? ?http://nodejs.org/
? ? ? ?* 命令: cmd:
? ? ? ? ?* node -v查看安裝的nodejs版本
? ? ? ? ?* npm ?-v查看npm的版本號
? ? ? ? ?* 使用npm安裝插件
? ? ? ? ? ?* npm install <name> [-g] [--save-dev]
? ? ? ? ? ? ?* <name>：node插件名稱。例：npm install gulp-less --save-dev
? ? ? ? ? ? ?* -g：全局安裝:將會安裝在C:\Users\Administrator\AppData\Roaming\npm，并且寫入系統環境變量；
? ? ? ? ? ? ? ? ? ? ? 非全局安裝:將會安裝在當前定位目錄全局安裝可以通過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過require()調用；
? ? ? ? ? ? ?* --save：將保存配置信息至package.json（package.json是nodejs項目配置文件）；
? ? ? ? ? ? ?* -dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；
? ? ? ? * 思考:為什么要保存至package.json？
? ? ? ? ? ?因為node插件包相對來說非常龐大，所以不加入版本管理，
? ? ? ? ? ?將配置信息寫入package.json并將其加入版本管理，
? ? ? ? ? ?其他開發者對應下載即可（命令提示符執行npm install，則會根據package.json下載所有需要的包）。
? ? ? ? *使用npm卸載插件：npm uninstall <name> [-g] [--save-dev] PS：不要直接刪除本地插件包
? ? ? ? *使用npm更新插件：npm update <name> [-g] [--save-dev]
? ? ? ? *查看npm幫助：npm help
? ? ? ? * 當前目錄已安裝插件：npm list
? ? ? ? * npm安裝插件過程：從國外網站下載對應的插件包，有時候會很慢
? ? ? ? ? ?解決辦法用cnpm 鏡像安裝，用法同npm
? ? ? ? ? ?npm install cnpm -g --registry=https://registry.npm.taobao.org
四、安裝gulp
? ? ? 1.：全局安裝
? ? ? ??* 運行node命令: npm install -g gulp 或 cnpm install gulp –g ??
? ? ? ? * 說明: 全局安裝gulp目的是為了通過她執行gulp任務
? ? ? ? * 查看是否正確安裝（命令: gulp –v 【出現版本號即為正確安裝】）
?
? ? ? 2.在項目的根目錄下新建 package.json 文件
? ? ? ? ?方式一：命令式
? ? ? ? ?* 命令: npm init?
? ? ? ? ?* 說明: 會在根目錄下，自動生成一個package.json文件，它是基于nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件
? ? ? ? ? ? ? ? ? 它是這樣一個json文件（注意：json文件內是不能寫注釋的，復制下列內容請刪除注釋）：
? ? ? ? ? ??
? ? ? ? ?方式二：手動式
? ? ? ? ? 手動創建一個package.json文件，注意：json文件內是不能寫注釋的，復制下列內容請刪除注釋
{"name": "test", //項目名稱（必須）"version": "1.0.0", //項目版本（必須）"description": "This is for study gulp project !", //項目描述（必須）"homepage": "", //項目主頁"repository": { //項目資源庫"type": "git","url": "https://git.oschina.net/xxxx"},"author": { //項目作者信息"name": "surging","email": "surging2@qq.com"},"license": "ISC", //項目許可協議"devDependencies": { //項目依賴的插件"gulp": "^3.8.11","gulp-less": "^3.0.0"} }? ? ?? 3.本地安裝（即在項目的根目錄下安裝）
? ? ? ? ?* 進入項目根目錄，
? ? ? ? ?* 輸入命令:?npm install gulp --save-dev? ? ? ?
? ? ? ? ?* 說明: 全局安裝gulp是為了執行gulp任務，項目安裝gulp是為了調用gulp插件的功能。
? ? ? ?4.在項目根目錄下新建gulpfile.js 文件
? ? ? ? ?* 說明: gulpfile.js是gulp項目的配置文件,它是gulp的主文件，在gulpfile.js文件中定義相關任務。
? ? ? ? ?* 1.引入gulp及組件
? ? ? ? ?* 2.配置開發和發布路徑
? ? ? ? ?* 3.為每個插件的運行編寫一個task
? ? ? ? ?* 4.建立默認task（將所有插件任務引入）
? ? ? ? ?* 5.建立監聽(監聽所有任務)
? ? ? ? ?* 6.執行任務
? ? ? ? ?* 默認:執行所有任務 命令: gulp
? ? ? ? ?* 單個:例如清空文件夾任務 命令: gulp clean
? ? ? ? ！！！！注意：根據需要配置要清空的文件夾及文件的相關路徑 ！！！！
? ? ? ? ?簡單的示例
//導入工具包 require('node_modules里對應模塊') var gulp = require('gulp'), //本地安裝gulp所用到的地方 less = require('gulp-less'); //定義一個testLess任務（自定義任務名稱） gulp.task('testLess', function () { gulp.src('src/less/index.less') //該任務針對的文件 .pipe(less()) //該任務調用的模塊 .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css }); gulp.task('default',['testLess', 'elseTask']); //定義默認任務 //gulp.task(name[, deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數 //gulp.src(globs[, options]) 執行任務處理的文件 globs：處理的文件路徑(字符串或者字符串數組) //gulp.dest(path[, options]) 處理完后文件生成路徑? ? ? ?5運行gulp任務
? ? ? ?* 命令: gulp default或gulp ??
? ? ? ?* Webstrom: 右鍵gulpfile.js 選擇”Show Gulp Tasks”打開Gulp窗口，若出現”No task found”，選擇右鍵”Reload tasks”，雙擊運行即可。
? ? ? ?* 說明: 要運行gulp任務，只需切換到存放gulpfile.js文件的目錄
? ? ? ? ? ? ? ? ? gulp后面可以加上要執行的任務名，例如gulp task1，如果沒有指定任務名，則會執行任務名為default的默認任務。
五、根據需求下載相應的插件包
? ? ? 安裝命令:
? ? ? ? ? ?npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr ? ? ? ? ? ?--save-dev ? ? ? ? ??
? ? ??1.Css類
? ? ? ? ?* gulp-minify-css : 壓縮css
? ? ? ? ?* gulp-less : 支持less
? ? ? ? ?* css文件引用URL圖片加版本號(gulp-make-css-url-version);
? ? ? ? ?* 編譯Sass,生成雪碧圖(gulp-compass);
? ? ? ? ?* 編譯sass(gulp-sass);
? ? ? ? ?* sass瀏覽器地圖(gulp-sourcemaps);
? ? ?2.圖片類
? ? ? ? ?* 圖片壓縮(gulp-imagemin);
? ? ? ? ?* 緩存通知(gulp-cache);
? ? ?3.JS類
? ? ? ? ?* JS語法檢測(gulp-jshint);
? ? ? ? ?* JS丑化(gulp-uglify);
? ? ?4.html類
? ? ? ? ?* 壓縮html(gulp-htmlmin)
? ? ? ? ?* html文件引用加版本號(gulp-rev-append);
? ? ?5.文件類
? ? ? ? ?* 文件合并(gulp-concat);
? ? ? ? ?* 重命名文件(gulp-rename);
? ? ? ? ?* 清空文件夾(gulp-clean);
? ? ? ? ?* 更新通知(gulp-notify);
? ? ?6.web服務類
? ? ? ? ?* gulp-connect
? ? ? ? ?* gulp-livereload: 服務器控制客戶端同步刷新（需配合chrome插件LiveReload及tiny-lr）
六、gulp API
? ? ?使用gulp，僅需知道4個API即可：gulp.task(), ?gulp.src(), ?gulp.dest(), ?gulp.watch()
? ? ?* gulp.src()
? ? ? ? * 用來獲取需要操作的文件流
? ? ? ? * 使用Nodejs中的stream(流)，首先獲取到需要的stream，然后通過stream的pipe()方法把流導入到你想要的地方，
? ? ?*?gulp.src(globs[, options])
? ? ? ? * 輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。?將返回一個 Vinyl files 的 stream 它可以被 piped 到別的插件中
? ? ? ?例:
? ? ? ? ? ?gulp.src('client/templates/*.jade')
? ? ? ? ? ? ? ? ?.pipe(jade())
? ? ? ? ? ? ? ? ?.pipe(minify())
? ? ? ? ? ? ? ? ?.pipe(gulp.dest('build/minified_templates'));
?
? ? ?這一邊主要是講解用法，下一篇，直接上project，更直觀。
?
轉載于:https://www.cnblogs.com/xfz1987/p/5688794.html
總結
以上是生活随笔為你收集整理的我爱工程化 之 gulp 使用（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Learning Python 009
- 下一篇： Echart在Openlayers的应用