gulp的安裝教程,使用教程,和簡單的自動化任務教程


系統:win10
終端工具:cmder(或使用系統終端:win+R -> 輸入cmd -> 回車)
gulp官網地址:http://www.gulpjs.com.cn/
gulp中文文檔:http://www.gulpjs.com.cn/docs/
gulp插件地址:http://gulpjs.com/plugins
gulpAPI地址:http://www.gulpjs.com.cn/docs/api/

1.安裝node

window下,下載node安裝即可。
node下載地址:http://nodejs.cn/download/
安裝比較簡單,基本一直下一步即可,安裝路徑隨意。

安裝完成后,終端輸入如下命令 顯示版本號即安裝成功。

node -v

顯示版本號即安裝成功

2.推薦安裝 cnpm

npm服務器在國外,網絡影響大,甚至還會遇到需要翻牆才能下載插件的情況,因此推薦安裝cnpm。

注:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm。后面的演示均使用cnpm
注:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm。后面的演示均使用cnpm
注:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm。后面的演示均使用cnpm
重要的事情說三遍

【淘寶npm鏡像,這是一個完整 npmjs.org 鏡像,你可以用此代替官方版本(只讀),同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步】。
鏡像地址:http://npm.taobao.org/

2.1安裝cnpm

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

2.2檢測cnpm是否安裝成功

執行cnpm -v 顯示版本號即安裝成功
顯示版本號即安裝成功

3.全局安裝gulp

3.1 全局安裝gulp

執行cnpm install gulp -g

3.2檢測gulp是否安裝成功

執行gulp -v 顯示版本號即安裝成功
顯示版本號即安裝成功

4.項目文件根目錄新建package.json

注:package.json是基於nodejs項目必不可少的配置文件,它是存放在項目根目錄的普通json文件重點內容

4.1進入你的項目文件

示例:進入 D:/WWW/test 項目文件夾中
進入項目文件

4.2新建package.json

執行命令cnpm init
步驟圖片

4.3檢測package.json是否成功新建

查看項目文件根目錄,是否新建package.json,且內容是否和你終端中輸入的一致。
package.json內容如下:

{
"name": "test",
"version": "1.0.0",
"description": "我是描述",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
,
"author": "",
"license": "ISC"
}

注:可不使用cnpm init方式,可選擇手動創建package.json配置文件

5.本地安裝gulp插件

5.1本地安裝gulp

注:全局安裝gulp是為了執行gulp任務,本地安裝gulp則是為了調用gulp插件的功能

進入你的項目文件路徑中后,執行cnpm install gulp --save-dev
安裝gulp

注:項目文件中多了 node_modules 文件夾,里面是你本地安裝的插件

5.2安裝gulp-sass插件

進入你的項目文件路徑中后,執行cnpm install gulp-sass --save-dev

6.新建gulpfile.js(重要,重要,重要)

gulpfile.js是gulp的配置文件,放於根目錄中。

//gulpfile.js 示例文件

//導入你所需要用的工具包 require('node_modules里對應模塊')
var gulp = require('gulp'),
sass = require('gulp-sass');

// scss 任務
gulp.task('sass',function(){
return gulp.src('src/css/test.scss') //獲取該任務需要的文件
.pipe( sass() ) //該任務調用的模塊
.pipe( gulp.dest('src/css') ); //將在 src/css 文件夾中生產test.css
});

// 默認任務
gulp.task('default',['sass','watch1']);

//監聽文件
gulp.task('watch1',function(){
return gulp.watch('src/css/test.scss',['sass']);
//監聽 src/css/test.scss 文件,修改時自動執行 sass 任務。
});

詳細gulp api介紹,可參考官網:http://www.gulpjs.com.cn/docs/api/

7.運行gulp

7.1 執行gulp 任務名稱 運行該任務
示例:gulp sass 執行gulpfile.js中的sass任務
gulp sass任務
7.2 執行gulp 調用default中的所有任務
監聽事件
如圖:開啟監聽事件,當 src/css/test.scss 發生修改時,會自動執行sass任務。
監聽事件

8.常用插件

  1. sass的編譯(gulp-sass)
  2. less編譯 (gulp-less)
  3. 重命名(gulp-rename)
  4. 圖片轉換為base64-encoded (gulp-img64)
  5. 自動添加css前綴(gulp-autoprefixer)
  6. 壓縮css(gulp-clean-css)
  7. js代碼校驗(gulp-jshint)
  8. 合並js文件(gulp-concat)
  9. 壓縮js代碼(gulp-uglify)
  10. 壓縮圖片(gulp-imagemin)
  11. 自動刷新頁面(gulp-livereload,谷歌瀏覽器親測,谷歌瀏覽器需安裝livereload插件)
  12. 圖片緩存,只有圖片替換了才壓縮(gulp-cache)
  13. 更改提醒(gulp-notify)
  14. 阻止 gulp 插件發生錯誤導致進程退出並輸出錯誤日志(gulp-plumber)

9.關於匹配

  1. 列表內容

Gulp內部使用了node-glob模塊來實現其文件匹配功能。我們可以使用下面這些特殊的字符來匹配我們想要的文件:

  • *匹配文件路徑中的0個或多個字符,但不會匹配路徑分隔符,除非路徑分隔符出現在末尾
  • ** 匹配路徑中的0個或多個目錄及其子目錄,需要單獨出現,即它左右不能有其他東西了。如果出現在末尾,也能匹配文件。
  • ? 匹配文件路徑中的一個字符(不會匹配路徑分隔符)
  • [...] 匹配方括號中出現的字符中的任意一個,當方括號中第一個字符為^或!時,則表示不匹配方括號中出現的其他字符中的任意一個,類似js正則表達式中的用法
  • !(pattern|pattern|pattern) 匹配任何與括號中給定的任一模式都不匹配的
  • ?(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或1次,類似於js正則中的(pattern|pattern|pattern)?
  • +(pattern|pattern|pattern) 匹配括號中給定的任一模式至少1次,類似於js正則中的(pattern|pattern|pattern)+
  • *(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或多次,類似於js正則中的(pattern|pattern|pattern)*
  • @(pattern|pattern|pattern) 匹配括號中給定的任一模式1次,類似於js正則中的(pattern|pattern|pattern)

下面以一系列例子來加深理解

  • *能匹配 a.js,x.yabcabc/,但不能匹配a/b.js
  • *.*能匹配 a.jsstyle.cssa.bx.y
  • */*/*.js 能匹配 a/b/c.jsx/y/z.js,不能匹配a/b.jsa/b/c/d.js
  • ** 能匹配 abca/b.jsa/b/c.jsx/y/zx/y/z/a.b,能用來匹配所有的目錄和文件
  • **/*.js 能匹配 foo.jsa/foo.jsa/b/foo.jsa/b/c/foo.js
  • a/**/z 能匹配 a/za/b/za/b/c/za/d/g/h/j/k/z
  • a/**b/z 能匹配 a/b/za/sb/z,但不能匹配a/x/sb/z,因為只有單**單獨出現才能匹配多級目錄
  • ?.js 能匹配 a.jsb.jsc.js
  • a?? 能匹配 a.babc,但不能匹配ab/,因為它不會匹配路徑分隔符
  • [xyz].js 只能匹配 x.jsy.jsz.js,不會匹配xy.jsxyz.js等,整個中括號只代表一個字符
  • [^xyz].js 能匹配 a.jsb.jsc.js等,不能匹配x.jsy.jsz.js
    當有多種匹配模式時可以使用數組

//使用數組的方式來匹配多種文件

gulp.src(['js/*.js','css/*.css','*.html'])

使用數組的方式還有一個好處就是可以很方便的使用排除模式,在數組中的單個匹配模式前加上!即是排除模式,它會在匹配的結果中排除這個匹配,要注意一點的是不能在數組中的第一個元素中使用排除模式

gulp.src([*.js,'!b*.js']) //匹配所有js文件,但排除掉以b開頭的js文件
gulp.src(['!b*.js',*.js]) //不會排除任何文件,因為排除模式不能出現在數組的第一個元素中

此外,還可以使用展開模式。展開模式以花括號作為定界符,根據它里面的內容,會展開為多個模式,最后匹配的結果為所有展開的模式相加起來得到的結果。展開的例子如下:

  • a{b,c}d 會展開為 abdacd
  • a{b,}c 會展開為 abcac
  • a{0..3}d 會展開為 a0da1da2da3d
  • a{b,c{d,e}f}g 會展開為 abgacdfgacefg
  • a{b,c}d{e,f}g 會展開為 abdegacdegabdegabdfg

10.結束,參考文章

本文參考借鑒多篇文章 在 加上自己的實際測試后,寫了這篇文章。
如有不妥之處和疑問的地方,請留言賜教,謝謝。
關於gulp的介紹,可參考官網:
gulp官網地址:http://www.gulpjs.com.cn/
gulp中文文檔:http://www.gulpjs.com.cn/docs/
gulp插件地址:http://gulpjs.com/plugins
gulpAPI地址:http://www.gulpjs.com.cn/docs/api/
本文還參考了文章:
http://www.cnblogs.com/2050/p/4198792.html
http://www.ydcss.com/archives/18
等等…
本文初衷僅是喜歡和分享,不作其他用途,參考借鑒之處如有侵權請聯系刪除。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com