站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

nodejs中的gulp是什么意思

gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具,是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器;它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化,還能自動(dòng)化地完成前端代碼的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成,并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。使用它,不僅可以很愉快的編寫代碼,而且大大提高我們的工作效率。

nodejs中的gulp是什么意思

本教程操作環(huán)境:windows7系統(tǒng)、nodejs16版,DELL G3電腦。

1、什么是gulp?

  gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器;它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化,而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成;使用它,不僅可以很愉快的編寫代碼,而且大大提高我們的工作效率。

  gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器, 它能自動(dòng)化地完成 前端代碼的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成,并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。

2、什么是流?

  流,流水,把文件比作河流,那么一條河流流出,另一條河流流進(jìn),gulp對于文件流的操作就是這樣,一個(gè)操作的輸出結(jié)果作為另一個(gè)操作的輸入,像這樣

nodejs中的gulp是什么意思

  這種操作有點(diǎn)類似jQuery的鏈?zhǔn)讲僮鳎?("").html("gg").css({}).parent().find("a").……;在使用流的時(shí)候,gulp去除了中間文件,只將最后的輸出寫入磁盤,整個(gè)過程因此變得更快。

3、gulp的安裝

  gulp基于node環(huán)境,首先確保安裝了node

nodejs中的gulp是什么意思

  安裝了node,npm[(node package manager)nodejs的包管理器,用于node插件管理(包括安裝、卸載、管理依賴等)]也自動(dòng)被裝好了

nodejs中的gulp是什么意思

  因?yàn)閚pm安裝插件是從國外服務(wù)器下載,受網(wǎng)絡(luò)影響大,可能出現(xiàn)異常,所以最好用淘寶提供的cnpm來安裝node插件。

  安裝cnpm:http://npm.taobao.org/

nodejs中的gulp是什么意思

  安裝完后,查看cnpm版本以確保安裝成功

nodejs中的gulp是什么意思

  接下來就可以安裝gulp了,首先以全局方式安裝gulp:cnpm install g gulp

  然后進(jìn)入桌面demo/bbs2.0/src下面,進(jìn)入bash環(huán)境,用cnpm install gulp 來將gulp安裝到當(dāng)前目錄下

nodejs中的gulp是什么意思

  安裝成功后,會(huì)出現(xiàn)node_modules文件夾,然后通過cnpm init來創(chuàng)建package.json(node項(xiàng)目配置文件:因?yàn)閚ode插件包相對來說非常龐大,所以不加入版本管理,將配置信息寫入package.json并將其加入版本管理,其他開發(fā)者對應(yīng)下載即可)

nodejs中的gulp是什么意思

  一路回車下去,會(huì)生成package.json文件到當(dāng)前文件夾,此時(shí)嘗試去用gulp來啟動(dòng)gulp,會(huì)發(fā)現(xiàn)會(huì)報(bào)錯(cuò)

nodejs中的gulp是什么意思

  根據(jù)報(bào)錯(cuò)信息,我們需要建一個(gè)gulpfile.js文件

nodejs中的gulp是什么意思

  然后再運(yùn)行g(shù)ulp

nodejs中的gulp是什么意思

  會(huì)發(fā)現(xiàn)打印出了我們需要的“ok”,到這里gulp基本就可以正常工作了。

4、gulp常用插件使用

  1)壓縮合并文件

    新建一個(gè)index.html文件

nodejs中的gulp是什么意思

    在js目錄下新建兩個(gè)js文件

nodejs中的gulp是什么意思

nodejs中的gulp是什么意思

    編輯gulpfile文件。如下:

nodejs中的gulp是什么意思

    由于我們用了gulp-uglify,gulp-concat兩個(gè)插件,所以我們得先安裝這兩個(gè)插件到當(dāng)前目錄

nodejs中的gulp是什么意思

    當(dāng)安裝插件的時(shí)候用–save-dev添加到package.json里面后,我們可以查看package.json中是否成功寫入了該文件

nodejs中的gulp是什么意思

    OK,有了,那繼續(xù)安裝gulp-concat到目錄即可,安裝完成后,我們點(diǎn)開node_modules,也會(huì)發(fā)現(xiàn)成功安裝了該插件,現(xiàn)在我們來啟動(dòng)gulp

nodejs中的gulp是什么意思

    OK,沒報(bào)錯(cuò),那就說明成功了,接下來查看文件,發(fā)現(xiàn)src下面多了我們要壓縮合并的all.min.js文件

nodejs中的gulp是什么意思

    2)gulp-sass

     要安裝sass,首先得安裝ruby,進(jìn)入sass教程

nodejs中的gulp是什么意思

     點(diǎn)擊安裝,就會(huì)給出怎么樣安裝sass,以及安裝ruby

nodejs中的gulp是什么意思

    ruby安裝成功后,查看ruby版本

nodejs中的gulp是什么意思

    成功后通過gem來安裝sass

nodejs中的gulp是什么意思

    如果需要用compass(compass和sass關(guān)系相當(dāng)于jQuery和js)的話,順便把compass裝上

nodejs中的gulp是什么意思

    這里需要注意的是gem源的問題,會(huì)導(dǎo)致裝不上:會(huì)報(bào)錯(cuò):SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: ce rtificate verify failed 的錯(cuò)誤??梢园裧em源換成https://ruby.taobao.org/,如果還是不行,再換成http://gems.ruby-china.org/,再不行就人品問題了

    接下來用compass create來創(chuàng)建sass項(xiàng)目

nodejs中的gulp是什么意思

    創(chuàng)建成功后會(huì)自動(dòng)生成sass,stylesheets,config.rb三個(gè)文件

    打開sass里面的任意文件,編輯

nodejs中的gulp是什么意思

    然后編輯gulpfile

nodejs中的gulp是什么意思

    然后將gulp-sass,gulp-compass安裝到當(dāng)前目錄

nodejs中的gulp是什么意思

    啟動(dòng)gulp后,查看stylesheets里面對應(yīng)的文件

nodejs中的gulp是什么意思

    好了,sass已經(jīng)成功編譯成了css

    3)通過gulp-minify-css來壓縮css

nodejs中的gulp是什么意思

nodejs中的gulp是什么意思

    啟動(dòng)gulp后

nodejs中的gulp是什么意思

    4)使用gulp-load-plugins來幫我們加載插件

    gulp-load-plugins這個(gè)插件能自動(dòng)幫你加載package.json文件里的gulp插件

nodejs中的gulp是什么意思

    我們只需要在gulpfile里面require('gulp-load-plugins')();

nodejs中的gulp是什么意思

    下面只需要用plugin.**就可以了(多個(gè)單詞用駝峰命名)

nodejs中的gulp是什么意思

    5)gulp-imagemin和imagemin-pngquant壓縮圖片

    6)gulp-livereload來自動(dòng)刷新網(wǎng)頁

    首先安裝gulp-livereload:cnpm install gulp gulp-livereload,這里以壓縮HTML和編譯壓縮sass為列

    然后再gulpfile里面

nodejs中的gulp是什么意思

    要成功實(shí)現(xiàn)無刷新

    1、還需要chrome插件livereload的支持,翻下墻吧

    2、在服務(wù)器環(huán)境下打開網(wǎng)頁

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
国产精品高清一区二区三区不卡| 久久精品国产福利国产秒| 国产精品久久久久网站| 亚洲精品无码你懂的| 国产精品一区二区久久| 88国产精品视频一区二区三区 | 久久亚洲精品无码AV红樱桃| 久久精品国产半推半就| 亚洲国产一二三精品无码| 国内精品久久久久久久coent| 国产精品网址在线观看你懂的| 亚洲国产婷婷综合在线精品| 成人国产精品999视频| 秋霞日韩久久理论电影| 国产 日韩 中文字幕 制服| 丰满日韩放荡少妇无码视频 | 思思久久精品在热线热| 香蕉在线精品一区二区| 精品99又大又爽又硬少妇毛片| 国产99视频精品免费视频76 | 91国语精品自产拍在线观看一| 亚洲人成亚洲精品| 老司机性色福利精品视频| 一区二区三区日韩精品| 精品少妇人妻av无码久久| 91精品国产免费| 亚洲AV无码精品蜜桃| 国产精品久久久久影院嫩草| 2022国产精品自产拍在线观看| 中文字幕乱码亚洲精品一区| 久久精品视频在线看99| 日韩精品无码永久免费网站| 2019日韩中文字幕MV| 日韩成人免费在线| mm1313亚洲国产精品美女| 国产偷窥熟女高潮精品视频| 国产一区二区三区在线观看精品| 国产丝袜在线精品丝袜| 亚洲国产精品成人精品无码区| 日韩人妻无码精品久久久不卡| 精品无码久久久久国产|