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文件改變後進行保存操作,網頁立刻會做出改變,不用再手動刷新,等等還有其他功能,完成了網頁的自動化,大大的提高了工作效率。

至於其他的插件,我在上面有一個推薦的博客鏈接,講的挺好的了,可以直接的移步哪裡。

您可能感興趣的文章:
隨機閱讀: