gulp的安裝以及使用詳解,除了詳細還是詳細
安裝gulp:
1. 建立本地包管理環境:
使用npm init
命令在本地生成一個package.json
檔案,package.json
是用來記錄你當前這個專案依賴了哪些包,以後別人拿到你這個專案後,不需要你的node_modules
資料夾(因為node_moduels中的包實在太龐大了)。只需要執行npm install
命令,即會自動安裝package.json
下devDependencies
中指定的依賴包。
2. 安裝gulp:
gulp
的安裝非常簡單,只要使用npm
命令安裝即可。但是因為gulp
需要作為命令列的方式執行,因此需要在安裝在系統級別的目錄中。
npm install gulp -g
因為在本地需要使用require
的方式gulp
。因此也需要在本地安裝一份:
npm install gulp --save-dev
以上的--save-dev
是將安裝的包的新增到package.json
下的devDependencies
依賴中。以後通過npm install
即可自動安裝。devDependencies
這個是用來記錄開發環境下使用的包,如果想要記錄生產環境下使用的包,那麼在安裝包的時候使用npm install xx --save
就會記錄到package.json
下的dependencies
中,dependencies
是專門用來記錄生產環境下的依賴包的!
3. 建立gulp任務:
要使用gulp
來流程化我們的開發工作。首先需要在專案的根目錄下建立一個gulpfile.js
檔案。然後在gulpfile.js
中填入以下程式碼:
var gulp = require("gulp")
gulp.task("greet",function () {
console.log('hello world');
});
這裡對程式碼進行一一解釋:
-
通過
require
語句引用已經安裝的第三方依賴包。這個require
只能是引用當前專案的,不能引用全域性下的。require
語法是node.js
獨有的,只能在node.js
環境下使用。 -
gulp.task
gulp.task
的第一個引數是命令的名字,第二個引數是一個函式,就是執行這個命令的時候會做什麼事情,都是寫在這個裡面的。 -
寫完以上程式碼後,以後如果想要執行
greet
命令,那麼只需要進入到專案所在的路徑,然後終端使用gulp greet
即可執行。
4. 建立處理css檔案的任務:
gulp
只是提供一個框架給我們。如果我們想要實現一些更加複雜的功能,比如css
壓縮,那麼我們還需要安裝一下gulp-cssnano
外掛。gulp
相關的外掛安裝也是通過npm
命令安裝,安裝方式跟其他包是一模一樣的(gulp外掛本身就是一個普通的包)。
對css
檔案的處理,需要做的事情就是壓縮,然後再將壓縮後的檔案放到指定目錄下(不要和原來css檔案重合了)!這裡我們使用gulp-cssnano
來處理這個工作:
npm install gulp-cssnano --save-dev
然後在gulpfile.js
中寫入以下程式碼:
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
// 定義一個處理css檔案改動的任務
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./css/dist/"))
});
以上對程式碼進行詳細解釋:
新檔案:
gulp.task
:建立一個css
處理的任務。gulp.src
:找到當前css
目錄下所有以.css
結尾的css
檔案。pipe
:管道方法。將上一個方法的返回結果傳給另外一個處理器。比如以上的cssnano
。gulp.dest
:將處理完後的檔案,放到指定的目錄下。不要放在和原檔案相同的目錄,以免產生衝突,也不方便管理。
5. 修改檔名:
像以上任務,壓縮完css
檔案後,最好是給他新增一個.min.css
的字尾,這樣一眼就能知道這個是經過壓縮後的檔案。這時候我們就需要使用gulp-rename
來修改了。當然首先也需要安裝npm install gulp-rename --save-dev
。示例程式碼如下:
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./css/dist/"))
});
在上述程式碼中,我們增加了一行.pipe(rename({"suffix":".min"}))
,這個我們就是使用rename
方法,並且傳遞一個物件引數,指定修改名字的規則為新增一個.min
字尾名。這個gulp-rename
還有其他的指定檔名的方式,比如可以在檔名前加個字首等。更多的教程可以看這個:https://www.npmjs.com/package/gulp-rename。
6. 建立處理js檔案的任務:
處理js
檔案,我們需要使用到gulp-uglify
外掛。安裝命令如下:
npm install gulp-uglify --save-dev
安裝完後,我們就可以對js
檔案進行處理了。示例程式碼如下:
var gulp = require("gulp")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
gulp.task('script',function(){
gulp.src(path.js + '*.js')
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('js/'));
});
這裡就是增加了一個.pipe(uglify())
的處理,對js
檔案進行壓縮和醜化(修改變數名)等處理。更多關於gulp-uglify
的教程。請看:https://github.com/mishoo/UglifyJS2#minify-options。
7. 合併多個檔案:
在網頁開發中,為了加快網頁的渲染速度,有時候我們會將多個檔案壓縮成一個檔案,從而減少請求的次數。要拼接檔案,我們需要用到gulp-concat
外掛。安裝命令如下:
npm install gulp-concat --save-dev
比如我們現在有一個nav.js
檔案用來控制導航條的。有一個index.js
檔案用來控制首頁整體內容的。那麼我們可以使用以下程式碼將這兩個檔案合併成一個檔案:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('vendorjs',function(){
gulp.src([
'./js/nav.js',
'./js/index.js'
])
.pipe(concat('index.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
});
8. 壓縮圖片:
圖片是限制網站載入速度的一個主要原因。圖片越大,從網站上下載所花費的時間越長。因此對於一些圖片,我們可以採取無失真壓縮,即在不改變圖片質量的基礎之上進行壓縮。在gulp
中我們可以通過gulp-imagemin
來幫我們實現。安裝命令如下:
npm install gulp-imagemin --save-dev
壓縮圖片也是一個比較大的工作量,對於一些已經壓縮過的圖片,我們就沒必要再重複壓縮了。這時候我們可以使用gulp-cache
來快取那些壓縮過的圖片。安裝命令如下:
npm install gulp-cache --save-dev
兩個外掛結合使用的程式碼如下:
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image',function(){
gulp.src("./images/*.*")
.pipe(cache(imagemin()))
.pipe(gulp.dest('dist/images/'));
});
9. 檢測程式碼修改,自動重新整理瀏覽器:
以上所有的任務,我們都是需要手動的在終端去執行。這樣很不方便我們開發。最好的方式就是我修改了程式碼後,gulp
會自動的執行相應的任務。這個工作我們可以使用gulp
內建的watch
方法幫我們完成:
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
// 定義一個處理css檔案改動的任務
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./css/dist/"))
.pipe(connect.reload())
});
// 定義一個監聽的任務
gulp.task("watch",function () {
// 監聽所有的css檔案,然後執行css這個任務
gulp.watch("./css/*.css",['css'])
});
以後只要在終端執行gulp watch
命令即可自動監聽所有的css
檔案,然後自動執行css
的任務,完成相應的工作。
10. 更改檔案後,自動重新整理瀏覽器:
以上我們實現了更改一些css
檔案後,可以自動執行處理css
的任務。但是我們還是需要手動的去重新整理瀏覽器,才能看到修改後的效果。有什麼辦法能在修改完程式碼後,自動的重新整理瀏覽器呢。答案是使用browser-sync
。browser-sync
安裝的命令如下:
npm install browser-sync --save-dev
browser-sync
使用的示例程式碼如下:
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
var bs = require("browser-sync").create()
gulp.task("bs",function () {
bs.init({
'server': {
'baseDir': './'
}
});
});
// 定義一個處理css檔案改動的任務
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./css/dist/"))
.pipe(bs.stream())
});
// 定義一個監聽的任務
gulp.task("watch",function () {
gulp.watch("./css/*.css",['css'])
});
// 執行gulp server開啟伺服器
gulp.task("server",['bs','watch'])
以上我們建立了一個bs
的任務,這個任務會開啟一個3000
埠,以後我們在訪問html
頁面的時候,就需要通過http://127.0.0.1:3000
的方式來訪問了。然後接下來我們還定義了一個server
任務。這個任務會去執行bs
和watch
任務,只要修改了css
檔案,那麼就會執行css
的任務,然後就會自動重新整理瀏覽器。browser-sync
更多的教程請參考:http://www.browsersync.cn/docs/gulp/。