gulp

gulp介紹

地址

  • 是一款nodejs應(yīng)用
  • 打造前段工作流的利器暗挑,打包辜羊,壓縮踏兜,合并,git八秃,遠(yuǎn)程操作
  • ......

gulp常見問題

1碱妆,安裝

npm install gulp-cli -g 全局安裝
npm install gulp -D 在當(dāng)前目錄下安裝(這樣才能require到,全局是require不到的昔驱,詳情見npm
touch gulpfile.js 創(chuàng)建gulpfile.js文件
gulp --help 查看指令

  • gulpfile.js
var gulp = require('gulp');
var pug = require('gulp-pug'); //模板文件 生成html
var less = require('gulp-less'); //將less轉(zhuǎn)化為css
var minifyCSS = require('gulp-csso'); //壓縮css

gulp.task('html',function () {  //基床上定義了一個事件叫html
   return gulp.src('client/templates/*.pug') //會把當(dāng)前src下面的所有的.pug文件輸進(jìn)去(物料)
       .pipe(pug()) // 然后通過pipe()變成數(shù)據(jù)流  傳給pug() 處理之后又傳給后面的進(jìn)行pipe
       .pipe(gulp.dest('build/html')) // 后面不需要處理了  就直接把它輸出成html
});
// 定義好之后  只需要命令行執(zhí)行 gulp html 就會執(zhí)行這個事情


//同理 也可以定義事件css 將less文件轉(zhuǎn)換為css并且壓縮
gulp.task('css',function () {
   return gulp.src('client/templates/*.less')
       .pipe(less())
       .pipe(minifyCSS())
       .pipe(gulp.dest('build/css'))
});

// 定義事件default 直接簡寫 直接命令行執(zhí)行 gulp   就會執(zhí)行這個default事件疹尾,然后由于這個任務(wù)里面有html css兩個任務(wù) 就會都執(zhí)行
gulp.task('default',['html','css']);

gulp使用

具體使用舉例1:(合并css文件)

文件夾結(jié)構(gòu)如圖


1.png

要將src文件夾下的幾個css文件合并并且壓縮到dist文件夾下的css中以便發(fā)布,具體操作流程如下:

  • 1,在demo1下創(chuàng)建gulpfile.js
  • 2航棱,在demo1下創(chuàng)建package.json(可以通過npm init)
  • 3睡雇,運行npm install gulp --save-dev或者(-D)來在本地添加gulp使得我們可以在gulpfile.js中require到gulp萌衬,完成后package.json中出現(xiàn)"devDependencies"饮醇。
  • 4,這樣就可以在gulpfile.js中var gulp = require('gulp');了秕豫,另外我們還需要cssnano(將css壓縮)和concat(文件合并)兩個插件,同樣的朴艰,我們進(jìn)行插件的安裝
    npm install gulp-cssnano --save-dev
    npm install --save-dev gulp-concat
  • 5,進(jìn)行g(shù)ulpfile.js的書寫
    首先介紹gulp的幾個重要方法
    gulp對象的4個方法
    具體使用見API文檔
  • gulp其實就是一個對象,其實只有g(shù)ulp.src/gulp.dest/gulp.task/gulp.watch四個方法
  • gulp.src的作用就是需要去處理哪些文件
  • gulp.dest的作用就是輸出文件
  • gulp.task 創(chuàng)建一個任務(wù) 一個任務(wù)可以認(rèn)為是一個流水線
  • gulp.task中的參數(shù)中可以傳入依賴的其他任務(wù)混移,這些任務(wù)是默認(rèn)并行執(zhí)行的并且是在當(dāng)前任務(wù)之前執(zhí)行的
  • gulp.watch監(jiān)測文件的改動
具體gulpfile.js的書寫:
  1. 引入模塊跟插件
//本地安裝gulp進(jìn)行開發(fā)npm install gulp -D  使得可以require到gulp
var gulp = require('gulp');

//安裝2個需要用到的插件
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
  1. 通過gulp.task創(chuàng)建一個任務(wù)祠墅,叫做css
gulp.task('css', function() {

    // gulp.src('./src/css/*.css') //需要處理的文件是相對于gulpfile.js的路徑即當(dāng)前文件夾下的src/css下的所有的css文件
    //如果只想處理common.css和index.css,那么可以寫成
    gulp.src(['./src/css/common.css','./src/css/index.css']) //這樣就得到了數(shù)據(jù)流
        .pipe(concat('index-merge.css')) //將數(shù)據(jù)流通過pipe傳遞給下一個工序歌径,這里是concat(),合并css文件并且命名為index-merge.css
        .pipe(cssnano())//然后進(jìn)行壓縮
        .pipe(gulp.dest('./dist/css')) //然后通過dest輸出到指定目錄下毁嗦,這里是dist文件夾下

});

寫好之后 可以通過終端 定位到當(dāng)前目錄下 運行g(shù)ulp 指定task名即可,這里是gulp css
運行之后我們的兩個css文件就合并成功了

接著我們可以把剩下的reset.css只進(jìn)行壓縮一下 也放到dist/css下

gulp.task('nanoReset',function () {
    gulp.src('./src/css/reset.css')
        .pipe(cssnano())
        .pipe(gulp.dest('./dist/css'))
})

寫好之后運行gulp nanoReset
當(dāng)然也可以將task名字命名為default 這樣運行的時候就直接輸入gulp 即可運行 ,例如:

gulp.task('default',function () {
    gulp.src('./src/css/reset.css')
        .pipe(cssnano())
        .pipe(gulp.dest('./dist/css'))
})

或者再創(chuàng)建一個task,名字為default,然后寫上gulp.task('default',['css'])最后運行的時候輸入gulp即可

具體使用舉例2:(實現(xiàn)一個保存代碼之后瀏覽器馬上刷新的效果)

用到一個nodejs應(yīng)用browser-sync

var gulp = require('gulp');

//引入組件
var browserSync = require('browser-sync').create();
var fs = require('fs');

gulp.task('reload',function () { //定義一個任務(wù)reload回铛,進(jìn)行刷新
    browserSync.reload();
})

gulp.task('server',function () { //定義一個任務(wù)server 啟動一個服務(wù)器狗准,基準(zhǔn)路徑是./src
    browserSync.init({
        server:  {
            baseDir: "./src"
        }
    });
    gulp.watch(['**/*.css','**/*.js','**/*.html'],['reload']); //監(jiān)聽文件,只要文件發(fā)生變化就進(jìn)行reload任務(wù)
})

具體應(yīng)用舉例3(實現(xiàn)css,js,圖片的壓縮合并等):

var gulp = require('gulp');

//引入組件
var minifycss = require('gulp-minify-css'), //css壓縮
    uglify = require('gulp-uglify'), //js壓縮
    concat = require('gulp-concat'), //合并文件

    rename = require('gulp-rename'), //重命名
    clean = require('gulp-clean'), // 清空文件夾

    minhtml = require('gulp-htmlmin'), // html壓縮
    jshint = require('gulp-jshint'), //js代碼規(guī)范性檢查
    imagemin = require('gulp-imagemin'); //圖片壓縮

gulp.task('html',function () {
    return gulp.src('./src/*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
})

gulp.task('css',function () {
    gulp.src('./src/css/*.css')
        .pipe(concat('merge.min.css'))
        .pipe(renama({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css/'));
})
gulp.task('js',function () {
    gulp.src('./src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))
})

gulp.task('img',function () {
    gulp.src('./src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/imgs'));
})
gulp.task('clear',function () {
    gulp.src('./dist/*',{read: false})
        .pipe(clean());
});

gulp.task('build',['html','css','js','img']);

運行gulp build茵肃,如果需要清空dist內(nèi)的文件腔长,運行gulp clear

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市验残,隨后出現(xiàn)的幾起案子捞附,更是在濱河造成了極大的恐慌,老刑警劉巖您没,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸟召,死亡現(xiàn)場離奇詭異,居然都是意外死亡氨鹏,警方通過查閱死者的電腦和手機欧募,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喻犁,“玉大人槽片,你說我怎么就攤上這事≈。” “怎么了还栓?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長传轰。 經(jīng)常有香客問我剩盒,道長,這世上最難降的妖魔是什么慨蛙? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任辽聊,我火速辦了婚禮纪挎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘跟匆。我一直安慰自己异袄,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布玛臂。 她就那樣靜靜地躺著烤蜕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪迹冤。 梳的紋絲不亂的頭發(fā)上讽营,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音泡徙,去河邊找鬼橱鹏。 笑死,一個胖子當(dāng)著我的面吹牛堪藐,可吹牛的內(nèi)容都是我干的莉兰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼庶橱,長吁一口氣:“原來是場噩夢啊……” “哼贮勃!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起苏章,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤寂嘉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后枫绅,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泉孩,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年并淋,在試婚紗的時候發(fā)現(xiàn)自己被綠了寓搬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡县耽,死狀恐怖句喷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情兔毙,我是刑警寧澤唾琼,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站澎剥,受9級特大地震影響锡溯,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一祭饭、第九天 我趴在偏房一處隱蔽的房頂上張望芜茵。 院中可真熱鬧,春花似錦倡蝙、人聲如沸九串。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒸辆。三九已至,卻和暖如春析既,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背谆奥。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工眼坏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人酸些。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓宰译,卻偏偏與公主長得像止吐,于是被迫代替她去往敵國和親麦牺。 傳聞我的和親對象是個殘疾皇子辫狼,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • gulpjs是一個前端構(gòu)建工具锚沸,與gruntjs相比服鹅,gulpjs無需寫一大堆繁雜的配置參數(shù)姿鸿,API也非常簡單犬耻,學(xué)...
    依依玖玥閱讀 3,152評論 7 55
  • 1眶蕉、gulp的安裝 首先確保你已經(jīng)正確安裝了nodejs環(huán)境填帽。然后以全局方式安裝gulp: npm install...
    F_imok閱讀 2,373評論 1 11
  • 在現(xiàn)在的前端開發(fā)中蛛淋,前后端分離、模塊化開發(fā)篡腌、版本控制褐荷、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,439評論 1 32
  • 對網(wǎng)站資源進(jìn)行優(yōu)化嘹悼,并使用不同瀏覽器測試并不是網(wǎng)站設(shè)計過程中最有意思的部分叛甫,但是這個過程中的很多重復(fù)的任務(wù)能夠使用...
    懵逼js閱讀 1,064評論 0 8
  • 安裝Gulp首先需要安裝Node.js,并在控制臺輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 913評論 0 1