gulp基本用法

嗨，小夥伴們，你們週五好，又到了一週中最最最期待的週五啦啦~~~

這幾天一直在研究gulp的使用方法，今天抽時間來整理一下基本步驟。

gulp 的使用流程： 安裝nodejs ->安裝git（方便調出命令窗口，可選） -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務

1.gulp是基於node開發的工具，因此在使用gulp前，必須先安裝node.js，安裝步驟很簡單，從網上下載一個node安裝包，一步一步進行安裝便可，個人安裝包是node-v4.4.4-x64.msi版本。

2.爲了調用命令窗口方便，咱們在本地安裝git，git的安裝也很是簡單哦，從網上下載一個git安裝包，一步一步進行安裝便可，個人安裝包是Git-2.7.2-64-bit_setup.exe。

3.接下來是全局安裝gulp，全局安裝的意思，就是整個電腦裏，有gulp的環境，全局安裝是在命令窗口安裝的，接下來，隨便在桌面右擊，點擊gitBash 後，輸入命令 npm install gulp而後回車，進行全局安裝gulp。 

 

。

4 開始建立項目，

4.1首先建立一個英文的文件夾，好比project文件夾，打開文件夾，在文件夾的空白處右擊，出現gitBash——>點擊gitBash後，調出命令窗口，輸入命名：npm init 回車，這時候，細心的大家會發現，project文件夾裏出現一個package.json文件。

4.2而後再在項目中安裝gulp，通常狀況，有人反映不用局部安裝，不過，我的建議，局部安裝gulp仍是比較靠譜些，哈哈。在命令窗口中，輸入命令：npm install gulp --save-dev回車 

此時，大家會發現，項目文件夾裏，又多出來一個node_modules文件夾，接下來，全部的插件安裝，都會安裝在node_modules文件夾裏面。安裝插件都在命令中執行，好比安裝replace插件，輸入命令：npm install gulp-replace回車，。 好比安裝saas ： npm install gulp-ruby-sass --save-dev。

4.3在項目根目錄下，建立src文件夾，src文件夾是放入html頁面，建立dist文件夾，dist文件夾用來盛放自動生成後的html頁面。

4.4在項目根目錄下建立gulpfile.js文件，如下全部js都將卸載gulpfile.js文件裏。

4.5命令 var gulp = require("gulp"); 獲取gulp模塊，獲取其餘模塊方法一樣。好比 var replace = require("gulp-replace")獲取替換模塊;

4.6gulp的幾種方法：

.pipe( ) //工做流，括號中寫gulp方法或者其餘插件方法或者js代碼，

 

gulp.task（）// 建立任務，

 

gulp.src（）// 獲取符合的文件，

 

gulp.dest（）// 輸出符合的文件，

 

.pipe(uglify( ) ) // 在工做流中啓用js壓縮功能，使用其餘插件工做一樣方法，注意不少插件的使用須要設置參數

 

代碼示例：gulp.task("taskname",["taskname1","taskname2"],function( ){ return gulp.src("/app/css/**/*.css",{base:"app"}).pipe(uglify( )).pipe(gulp.dest("/dist"))   });

再例如：

var gulp = require("gulp");
var replace = require("gulp-replace");

gulp.task("lyx",function(){
gulp.src("./src/html/**/*.html")
.pipe(replace(/<title>.*?<\/title>/gi,"<title>劉雨熙網站</title>"))
.pipe(replace(/tppabs\s?=\s?['"].*?["']/gi,""))
.pipe(gulp.dest("./dist/html/"));
});

5.開始運行gulp項目，輸入命令：gulp lyx ，其中lyx就是上一列中建立的任務名稱。

 

6.轉移、複製項目時，只需把gulpfile.js 、package.json、和項目文件複製過去便可，無需複製node_modules文件夾，複製到目標文件夾後，右擊根目錄文件夾，啓用命令工具，如git，輸入命令：npm install ，會自動根據package.json中的安裝目錄逐一安裝node_modules文件夾內的插件。

 

好了，到此，我想你們應該對gulp有個大概的瞭解了，以上就是我這幾天研究總結出來的東西，但願對你們有所幫助。