經驗之談——gulp使用教程

gulp的最實用教程

使用gulp編譯less、sass、壓縮js等經常使用功能講解

　　　

　　gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。

　　gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

 

　　在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。

 

  

gulp環境的搭建

學習前，先了解一下大體使用gulp的步驟。先固然是安裝nodejs，經過nodejs的npm全局安裝和項目安裝gulp，其次在項目裏安裝所須要的gulp插件，而後新建gulp的配置文件gulpfile.js並寫好配置信息（定義gulp任務），最後經過命令提示符運行gulp任務便可。

安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務。

npm（node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；

簡單介紹gulp在使用過程當中經常使用命令，打開命令提示符執行下列命令（打開方式：window + r 輸入cmd回車）：

node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。PS：未能出現版本號，請嘗試註銷電腦重試；

npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器.

cd定位到目錄，用法：cd + 路徑 ；

dir列出文件列表；

cls清空命令提示符窗口內容。

按下win+R鍵，鍵入cmd，執行以下代碼：

npm install <name> [-g] [--save-dev]

 

--save：將保存配置信息至package.json（package.json是nodejs項目配置文件）；
-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；通常保存在dependencies的像這些express/ejs/body-parser等等。

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，若是npm的服務器在中國就行了，因此咱們樂於分享的淘寶團隊幹了這事。！這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。

使用以下命令安裝：

npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安裝完後最好查看其版本號cnpm -v；

全局安裝gulp：

 

cnpm install gulp -g

 

查看gulp版本號：

gulp -v

定位到本地：

cd +路徑

 

 

package.json文件

新建package.json文件：package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通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"
}
}

 注：若複製此文件，不能包含任何的註釋，請把註釋都刪掉；

固然咱們能夠手動新建這個配置文件，可是做爲一名有志青年，咱們應該使用更爲效率的方法：命令提示符執行:

cnpm init

 

安裝本地gulp插件

安裝：定位目錄命令後提示符執行cnpm install --save-dev；

本示例以gulp-less爲例（編譯less文件），命令提示符執行

cnpm install gulp-less --save-dev

 將會安裝在node_modules的gulp-less目錄下，該目錄下有一個gulp-less的使用幫助文檔README.md；

本地安裝將安裝在定位目錄的node_modules文件夾下，經過require()調用；

爲了能正常使用，咱們還得本地安裝gulp：


cnpm install gulp --save-dev

 全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。

 

新建gulpfile.js文件（重要）

說明：gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件（其實將gulpfile.js放入其餘文件夾下亦可）。

它大概是這樣一個js文件：

//導入工具包 require('node_modules裏對應模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
less = require('gulp-less'),
sass=require('gulp-sass'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
livereload = require('gulp-livereload'),
cssmin = require('gulp-clean-css');
//確保已本地安裝gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]
cssver = require('gulp-make-css-url-version');

//定義一個testLess任務（自定義任務名稱）
gulp.task('testLess', function () {
gulp.src('less/lessDemo.less') //該任務針對的文件
.pipe(less()) //該任務調用的模塊
.pipe(gulp.dest('css')); //將會在src/css下生成lessDemo.css
});
// 編譯Sass
gulp.task('testSass', function() {
gulp.src('sass/sassDemo.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});

//合併JS
gulp.task('testConcat', function () {
gulp.src('SRC/*.js')
.pipe(concat('all.js'))//合併後的文件名
.pipe(gulp.dest('dist/js'));
});

gulp.task('testCssmin', function () {
gulp.src('css/lessDemo.css')
.pipe(cssver()) //給css文件裏引用文件加版本號（文件MD5）
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});

//壓縮JS
gulp.task('jsmin', function () {
gulp.src('js/bootstrap.js')
.pipe(uglify({
//mangle: true,//類型：Boolean 默認：true 是否修改變量名
mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆關鍵字
}))
.pipe(gulp.dest('dist/js'));
});

gulp.task('less', function() {
gulp.src('less/test1.less')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
});

gulp.task('watch', function() {
livereload.listen();
gulp.watch('less/test1.less', ['less']);
});

gulp.task('default',['testLess','testSass']); //定義默認任務
//gulp.task(name[, deps], fn) 定義任務 name：任務名稱 deps：依賴任務名稱 fn：回調函數
//gulp.src(globs[, options]) 執行任務處理的文件 globs：處理的文件路徑(字符串或者字符串數組)
//gulp.dest(path[, options]) 處理完後文件生成路徑

 

require("gulp")：導入工具包 require('node_modules裏對應模塊');

src(globs[, options])：src方法是指定須要處理的源文件的路徑，gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前文件流至可用插件；
通配符路徑匹配示例：
「css/a.js」：指定具體文件；
「*」：匹配全部文件
「**」：匹配0個或多個子文件夾
「{}」：匹配多個屬性
「!」：排除文件

.dest(path[, options])：dest方法是指定處理完後文件輸出的路徑；
dest方法是指定處理完後文件輸出的路徑；

.task(name[, deps], fn)：task定義一個gulp任務；

.pipe()方法：pipe方法傳入方法的是一個function，這個function做用是接受上一個流（stream）的結果，並返回一個處理後流的結果(返回值應該是一個stream對象)。

此處特別說明一下編譯sass：
根據博主的使用經驗，gulp-sass依賴了node-sass這個庫。安裝node-sass這個庫的時候要執行一個腳本，而在這個過程當中出錯了，能夠試下管理員身份安裝。你們在使用時需注意。

 

運行gulp

說明：命令提示符執行gulp 任務名稱；

編譯less：命令提示符執行：

 

gulp testLess

 

 

 

當執行gulp default或gulp將會調用default任務裏的全部任務。

 

寫在最後
當我在用 gulp 時我用它作什麼？

編譯 sass
合併優化壓縮 css
校驗壓縮 js
優化圖片
添加文件加密（md5）
組件化頭部底部（include html）
實時自動刷新…
總之，gulp是前端開發過程當中對代碼進行自動化構建的利器。它不只能對資源進行優化，並且在開發過程當中可以經過配置自動完成不少重複的任務，讓咱們能夠專一於代碼，提升工做效率。

本期分享就到這裏，咱們下期再見。以爲內容不錯的小夥伴請點推薦，歡迎你們在評論下方評論區與博主互動，謝謝你們！

 更多精彩內容，敬請關注 Q的前端世界的技術博客。