一、全局安裝gulp
1、說明:全局安裝gulp目的是為了通過她執(zhí)行g(shù)ulp任務(wù);
2、安裝:命令提示符執(zhí)行

npm install gulp -g
3、查看是否正確安裝:命令提示符執(zhí)行
gulp -v
出現(xiàn)版本號即為正確安裝。
二、項(xiàng)目中安裝gulp
npm install --save-dev gulp
-注:全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù),本地安裝gulp則是為了調(diào)用gulp插件的功能。
三、安裝gulp某個(gè)模塊(以gulp-less為例,編譯less文件)
npm install gulp-less --save-dev
四、新建package.json文件
npm init
根據(jù)提示進(jìn)行填寫項(xiàng)目信息。
五、在項(xiàng)目根目錄下新建gulpfile.js文件,gulpfile.js是gulp項(xiàng)目的配置文件,是位于項(xiàng)目根目錄的普通js文件(其實(shí)將gulpfile.js放入其他文件夾下亦可),文件示例如下:
1 2 3 4 5 | //導(dǎo)入工具包 require('node_modules里對應(yīng)模塊')var gulp = require('gulp'), //本地安裝gulp所用到的地方less =require('gulp-less');//定義一個(gè)testLess任務(wù)(自定義任務(wù)名稱)gulp.task('testLess', function () {gulp.src('src/less/index.less')//該任務(wù)針對的文件.pipe(less())//該任務(wù)調(diào)用的模塊.pipe(gulp.dest('src/css'));//將會在src/css下生成index.css}); |
gulp.task('default',['testLess', 'elseTask']); //定義默認(rèn)任務(wù) elseTask為其他任務(wù),該示例沒有定義elseTask任務(wù)//gulp.task(name[, deps], fn) 定義任務(wù) name:任務(wù)名稱 deps:依賴任務(wù)名稱 fn: 回調(diào)//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件 globs:處理的文件路徑(字符串或者字符串?dāng)?shù)組)//gulp.dest(path[, options]) 處理完后文件生成路徑
六、選裝cnpm
1、說明:因?yàn)閚pm安裝插件是從國外服務(wù)器下載,受網(wǎng)絡(luò)影響大,可能出現(xiàn)異常,如果npm的服務(wù)器在中國就好了,所以我們樂于分享的淘寶團(tuán)隊(duì)干了這事。來自官網(wǎng):“這是一個(gè)完整 npmjs.org 鏡像,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步。”;
2、官方下載;
3、安裝:命令提示符執(zhí)行
; 注意:安裝完后最好查看其版本號cnpm -v或關(guān)閉命令提示符重新打開,安裝完直接使用有可能會出現(xiàn)錯(cuò)誤;
注:cnpm跟npm用法完全一致,只是在執(zhí)行命令時(shí)將npm改為cnpm
網(wǎng)頁名稱:gulp的入門知識
分享網(wǎng)址:http://chinadenli.net/article22/cggjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、ChatGPT、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)