gulp入門學習教程（入門學習記錄）

前言

　　最近在經過教學視頻學習angularjs，其中有gulp的教學部分，對其的介紹爲能夠對文件進行合併，壓縮，格式化，監聽，測試，檢查等操做時，看到前三種功能個人心理思想是，網上有不少在線壓縮，在線解壓，css格式化，js格式化相似的工具，爲何還須要學習一項新技術呢。當學完了以後，被本身見識短淺而羞愧。

1 gulp的優勢

　　在作一個項目是，若是這個項目比較大，文件比較多，那這些文件的合併，壓縮，格式化，監聽，測試，檢查等操做該怎麼完成呢？若是像上面我所說的那樣經過一些在線功能進行操做的話，任務量比較大，並且當咱們對多個文件進行改動的話，又得從新一個個的手動在線壓縮等操做，顯然不是很高效，那麼此時gulp就能幫咱們高效的完成這些工做。反正當我學完了以後有一種 近視眼帶上了眼鏡的感受（哈哈，這個比喻不知道有沒有人能領悟到是什麼感受）。

　　相似於gulp，還有grunt，由於我只學過gulp，並且在github上gulp的使用更多，因此我選擇這個，具體用哪一個，各憑喜愛。

2 安裝gulp

　　首先應確保已經安裝了nodejs環境和npm（檢驗是否安裝的方法:node -v,npm -v）。而後以全局的方式安裝gulp

　　　　npm gulp -g     安裝完成後能夠經過gulp -v 檢驗是否安裝成功及gulp的版本號

　　　　-g global  全局安裝

　　　　--save將配置信息保存在package.json中（package.json在項目的根目錄中），這樣作的一個好處是，別人拿到這個項目即便沒有node_modules文件夾時，只要在命令行輸入 npm install name項目所須要的插件都會被下載下來

　　　　-dev 保存至package.json的devDependencies節點，不指定的話保存至dependencies節點

3 如何在項目中使用gulp

1. 新建一個項目目錄：demo_gulp
2. 在這個目錄下本地安裝gulp  npm install gulp  若是想在安裝的時候把gulp寫進項目package.json文件的依賴中，則能夠加上--save-dev： npm install --save-dev gulp  爲何要安裝兩次，點這裏
3. 新建package.json配置文件：npm init：　

　　　紅色的框是npm init後須要填寫的配置信息 若是默認，按回車便可，藍色的框是，配置完成後的確認信息

　　　配置完成後，在根目錄下會自動新建一個package.json的文件,文件的信息就是配置文件時填寫的信息

　　　　

　　4.在根目錄新建gulpfile.js文件，將如下代碼複製到gulpfile.ls中

　　　

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello gulp');
});

　　在命令行中輸入 gulp default,輸出以下圖：

　　

　　到這裏就已經實現了gulp的一個簡單的應用，

4.gulp的4個屬性  src，dest , watch , task

　　gulp.task(task_name,fn)  定義一個任務，在命令行中執行這個任務，如上面輸出「hello gulp」的代碼就是一個名爲「default」的任務

　　gulp.src('XX/XX/XX.js/css/less/...')   匹配文件並輸出。括號裏面的參數能夠是文件的路徑，也能夠是文件路徑組成的數組

　　gulp.dest() 將傳入的文件寫進來，若是文件夾不存在會自動建立文件夾

　　gulp.watch('XX/XX/XX.js/css/less/...',[task_name])   監聽文件；第一個參數能夠是某一個文件，也能夠是多個文件組成的數組，第二個參數是多個任務的名字組成的數組

　　pipe（）字面意思：管道；此方法是把一個文件流輸入，經過pipe管道輸出（下一個處理程序能夠把上一級輸出的流文件當作輸入）

　　下面這個例子是將src文件夾下面的demo.css複製到src 文件夾下面的style文件夾下面的css文件夾下，代碼寫好後在命令行執行 gulp copy任務便可，以下圖命令行截圖

gulp.task('copy',function(){
	gulp.src('./src/demo.css')  //匹配src文件夾下的demo.css文件並輸出
		.pipe(gulp.dest('./src/style/css'));
});

　　

　　下面是文件監聽的代碼和命令行截圖：

　　

gulp.task('watch',function(){
	gulp.watch('./src/demo.css',['copy']);
})

　　

　　當src文件下的demo.css發生改變時，就會執行copy任務，以下圖，每一次對src下面的demo.css的改變進行保存操做，，命令行都會自動的執行copy任務

　　

 

 5.gulp的一些經常使用插件

　　gulp的屬性就只有以上四個，name文件的合併，壓縮，格式化等等這些處理都有gulp的插件來完成，恰好看了一篇博客，我以爲他已經講得挺詳細的了，夠新手入門了，我在這裏只作一個簡單的例子

　　css的壓縮

　　首先要下載gulp-caanano的插件，在命令行輸入npm install gulp-cssnano --save-dev  ;而後再gulpfile.js中輸入如下代碼：

　　　　

var cssnano = require('gulp-cssnano');

gulp.src('.src/demo.css')
    .pipe(cssnano())  //壓縮demo.css文件
    .pipe(gulp.dest('./src/style/css'))

　　對src下的demo.css的修改完成並保存後，再在命令行執行任務gulp watch，便可自動化的完成css的壓縮。

 　　

　　最後在記錄一個瀏覽器自動化的例子

　　下載browser-sync插件，操做同上面相同，npm install browser-sync --save-dev,而後將下面的代碼複製到gulpfile.js中

　　

// 瀏覽器自動化
var browserSync=require('browser-sync').create();
gulp.task('serve',function(){
	browserSync.init({
		server:{
			baseDir:'./'  //以package.json爲同一目錄
		}
	})
})

　　再執行serve任務，以下圖   地址  http://localhost:3001  是設置自動化的設置， 地址 http://localhost:3000/src/index.html是個人網頁地址，當在不一樣的瀏覽器同時打開這個網頁，或者在同一瀏覽器不一樣窗口打開這一個網頁，對其中一個網頁操做（如input的輸入，頁面的滾動），另外一個網頁也會進行一樣的操做；對css文件改變後進行保存操做，網頁馬上會作出改變，不用再手動刷新，等等還有其餘功能，完成了網頁的自動化，大大的提升了工做效率。

　　

　　至於其餘的插件，我在上面有一個推薦的博客連接，講的挺好的了，能夠直接的移步哪裏。