国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

gulp基礎(chǔ)和常用插件介紹

Lsnsh / 958人閱讀

摘要:前提前端工程化是如今前端團(tuán)隊(duì)規(guī)范化管理項(xiàng)目和代碼的概念,而前端工程化中往往是離不開前端自動(dòng)化或打包工具這兩種工具。參數(shù)介紹可以理解成一種類似于正則表達(dá)式的匹配模式,其值可以為匹配形式,文件路徑,或者文件路徑數(shù)組。

前提:前端工程化是如今前端團(tuán)隊(duì)規(guī)范化管理項(xiàng)目和代碼的概念,而前端工程化中往往是離不開前端自動(dòng)化或打包工具這兩種工具。本文將詳細(xì)介紹其中一種常用的前端自動(dòng)化工具---gulp.js

- 入門:

安裝方式:

  全局安裝: npm install --g gulp
  局部(項(xiàng)目安裝): npm install --save-dev gulp

gulp配置文件:

在項(xiàng)目根目錄下創(chuàng)建一個(gè)gulpfile.js文件,其中default任務(wù)為主任務(wù),其他為功能任務(wù);
語(yǔ)法:

var gulp = require("gulp");
gulp.task("default",function(){...});

運(yùn)行方式:

在命令行中直接輸入gulp運(yùn)行,或者在webstorm中在對(duì)應(yīng)的gulpfile.js點(diǎn)中,然后右鍵,選擇show gulp task方式就能運(yùn)行;

- gulp的API:

一)gulp.src方法:

定義:該方法會(huì)匹配對(duì)應(yīng)的文件,并以虛擬文件流(包含路徑,文件名,內(nèi)容)的形式返回;

語(yǔ)法:gulp.src(globs [,option])

特點(diǎn):因?yàn)榉祷氐奈募魇穷愃朴赗eadable Streams的形式,所以可以利用pipe管道的方式傳輸,處理文件流。

參數(shù)介紹:

a)globs:可以理解成一種類似于正則表達(dá)式的匹配模式,其值可以為匹配形式,文件路徑,或者文件路徑數(shù)組。
*:匹配任何字符串但不識(shí)別路徑分隔符(‘/’)

eg: gulp.src("./build/*.js")   匹配build文件中所有js文件

**:匹配任何字符串包括‘/’

eg:gulp.src("**.js")  匹配任何路徑下的js文件

[...] : 枚舉

eg:  gulp.src("[abc].js")     匹配a.js或者b.js或者c.js

[!...] : 枚舉中括號(hào)中以外的一切字符串

eg:gulp.src("[!abc].js")    匹配d.js等等js文件

? : 職匹配一個(gè)字符串

eg:gulp.src("?.js")   匹配a.js等等js文件

b)option:里面有buffer,read,base配置項(xiàng),其中base項(xiàng)是關(guān)于文件流保存的路徑相關(guān)(具體放在dest方式中闡述)

二)gulp.dest方法:

定義:將文件流寫入到指定的路徑文件中,并繼續(xù)輸出該文件流;
語(yǔ)法:gulp.dest(path [,option])
注意事項(xiàng):
a)文件流寫入的文件名只能由流入的文件流定義;
b)path是路徑,不能是文件名;
c)src中base項(xiàng)默認(rèn)是匹配符之前的字符串路徑,但也可以人為設(shè)置,例子闡述:

gulp.src("a/b/*/[ab].js")
    .pipe(gulp.dest("./build"))

解釋:默認(rèn)base為a/b,塞進(jìn)文件流的文件名為*/[ab].js,所以新建的文件的路徑為./build/*/[ab].js
gulp.src("a/b/*/c/d.js",{base:"a"})
    .pipe(gulp.dest("./build"))

解釋:base現(xiàn)是a,塞進(jìn)文件流的文件名為b/*/c/d.js,所以新建的文件路徑為./build/b/*/c/d.js

d)dest方法輸出的文件流也可以被pipe傳輸;

三)gulp.task方法:

定義: 在gulp中定義一個(gè)任務(wù),其中主任務(wù)為default;
語(yǔ)法: gulp.task(name [,deps] ,fn)
參數(shù):

  name是任務(wù)名;
  deps是依賴的任務(wù)數(shù)組,是在當(dāng)前任務(wù)之前執(zhí)行的;
  fn:當(dāng)前任務(wù)內(nèi)容;

情景:
a) gulp.task("default",function(){...}):最簡(jiǎn)單模式;
b)gulp.task("default",["A1","A2"]):default是由A1,A2兩個(gè)任務(wù)組成的;
c)gulp.task("default", ["A1","A2"],function(){...}):先執(zhí)行完A1,A2,再執(zhí)行default任務(wù);

question: 若任務(wù)列表A1,A2中,A1存在異步操作,則執(zhí)行A2時(shí),A1還很可能未執(zhí)行完;
resolve:
A) fn任務(wù)函數(shù)可以引進(jìn)一個(gè)回調(diào)函數(shù)參數(shù),該參數(shù)可以告訴外界該任務(wù)是否執(zhí)行完;

eg:   gulp.task("A1",function(cb){
           setTime(function(){
           console.log(1);
           cb();
           },2000);
        })
        gulp.task("A2",function(){console.log(2);})
        gulp.task("default",["A1","A2"],function(){
             console.log(3)
        })
        輸出結(jié)果為:2 1 3

B)任務(wù)函數(shù)返回一個(gè)流對(duì)象,適用于gulp.src方法;

gulp.task("A",function(){
             return gulp.src("./a.js")
                        .pipe(插件)
          })
gulp.task("deafult",["A"],function(){...})

C)返回一個(gè)Promise對(duì)象;

gulp.task("A",function(){
            return new Promise( (res,rej) => {
            })
          })
gulp.task("default",["A"]);

四)gulp.watch方法:

定義:該方法是用來監(jiān)聽文件的變化;
語(yǔ)法一:gulp.watch(glob [,opts] , tasks)
語(yǔ)法二:gulp.watch(glob [,opts] , function(event){...})
event是一個(gè)事件對(duì)象;
event.type為added(添加類型);changed(改變類型);deleted(刪除類型)
event.path:變化的文件路徑;

- 常用gulp插件:

gulp有很多插件,而本文列舉出一些常用的插件

gulp-uglify插件

用途:用來壓縮js文件
用法:

var uglify = require("gulp-uglify");
gulp.task("uglifyJS",function(cb){
    gulp.src("./demo/*.js")
        .pipe(uglify())
        .pipe(gulp.dest("build"));
    cb();
});

gulp-minify-css插件

用途:用來壓縮css文件
用法:

var minifyCss = require("gulp-minify-css");
gulp.task("minifyCss",function(cb){
    gulp.src("./demo/*.css")
        .pipe(minifyCss())
        .pipe(gulp.dest("./build"));
    cb();
});

gulp-minify-html插件

用途:合并html文件
用法:

var miniHtml = require("gulp-minify-html");
gulp.task("miniHtml",function(cb){
    gulp.src("./src/*.html")
        .pipe(miniHtml())
        .pipe(gulp.dest("./build"));
});

gulp-connect插件

用途:自動(dòng)刷新頁(yè)面
用法:

var connect = require("gulp-connect");
gulp.task("connect",function(){
    connect.server({
        root:"src",
        livereload:true,
    })
});
gulp.task("watchHtml",function(){
    gulp.watch("./src/*.html",function(){
        gulp.src("./src/*.html")
            .pipe(connect.reload());
    })
});

gulp-jshint插件

用途:用來檢查js語(yǔ)法
用法:

var jshint = require("gulp-jshint");
gulp.task("checkJs",()=>{
    gulp.src("./src/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter())
});

gulp-concat插件

用途:合并多個(gè)js或者css文件
用法:

var concat = require("gulp-concat");
gulp.task("concat",()=>{
    gulp.src("./*/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("./build"));
});

gulp-rename:

定義;將文件改名;
語(yǔ)法:
a)rename(filename):將文件直接改為指定文件名;
b)rename({dirname:"A" ,basename:"B" ,prefix:"C-",suffix:"-D", extname:".txt"}):將文件名改為A/C-B-D.txt;
C)rename(function(path){}):path為一個(gè)對(duì)象,包含B)中所有屬性;

var rename =require("gulp-rename");   
gulp.task("rename",()=>{              
    gulp.src("./demo/*.css")          
        .pipe(rename({                
            suffix:".min",            
            extname:".less"           
        }))                           
        .pipe(gulp.dest("./build"));  
})                                    

參考文檔:
gulp文檔

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/89250.html

相關(guān)文章

  • gulp自動(dòng)化打包(上)

    摘要:自動(dòng)化打包上文章概述本文分為上下兩篇,上篇主要介紹一些常用的插件也是此次打包主要用的插件,而下篇主要以一個(gè)項(xiàng)目為例,從本地出合適的版本,壓縮合并到最后打成包,發(fā)送至指定目錄,做一個(gè)全面的演示。 gulp自動(dòng)化打包(上) 文章概述 本文分為上下兩篇,上篇主要介紹一些常用的gulp插件(也是此次打包主要用的gulp插件),而下篇主要以一個(gè)demo項(xiàng)目為例,從本地checkout出合適的g...

    roland_reed 評(píng)論0 收藏0
  • gulp詳細(xì)基礎(chǔ)教程

    摘要:核心概念流流,簡(jiǎn)單來說就是建立在面向?qū)ο蠡A(chǔ)上的一種抽象的處理數(shù)據(jù)的工具。類型,設(shè)置輸出路徑以某個(gè)路徑的某個(gè)組成部分為基礎(chǔ)向后拼接。 一、gulp簡(jiǎn)介 1.gulp是什么? gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器;它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成;使用它,不僅可以很愉快的編寫代碼,而且大大提高我們的工...

    xuhong 評(píng)論0 收藏0
  • gulp詳細(xì)基礎(chǔ)教程

    摘要:核心概念流流,簡(jiǎn)單來說就是建立在面向?qū)ο蠡A(chǔ)上的一種抽象的處理數(shù)據(jù)的工具。類型,設(shè)置輸出路徑以某個(gè)路徑的某個(gè)組成部分為基礎(chǔ)向后拼接。 一、gulp簡(jiǎn)介 1.gulp是什么? gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器;它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成;使用它,不僅可以很愉快的編寫代碼,而且大大提高我們的工...

    vibiu 評(píng)論0 收藏0
  • gulp詳細(xì)基礎(chǔ)教程

    摘要:核心概念流流,簡(jiǎn)單來說就是建立在面向?qū)ο蠡A(chǔ)上的一種抽象的處理數(shù)據(jù)的工具。類型,設(shè)置輸出路徑以某個(gè)路徑的某個(gè)組成部分為基礎(chǔ)向后拼接。 一、gulp簡(jiǎn)介 1.gulp是什么? gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器;它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成;使用它,不僅可以很愉快的編寫代碼,而且大大提高我們的工...

    張金寶 評(píng)論0 收藏0
  • gulpwebpack入門介紹

    摘要:介紹說明的包管理器,用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執(zhí)行插件名稱。總結(jié)安裝新建文件全局和本地安裝安裝插件新建文件通過命令提示符運(yùn)行任務(wù)。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言 眾所周知目前比較火的工具就是gulp和webpack,但webpack和gulp卻有所不同,本...

    hsluoyz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Lsnsh

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<