利用 Gulp 處理前端工作流程

Yangder 發(fā)布于2019-08-21 10:37 / 1532人閱讀

摘要：基本用法基本根據(jù)匹配文件，返回，可以通過(guò)方法傳遞給后續(xù)的插件。一般用法，把中的內(nèi)容按照指定的寫(xiě)成文件，會(huì)自動(dòng)創(chuàng)建不存在的文件夾。，用來(lái)代理請(qǐng)求，可以把發(fā)送到指定的地址。常用于開(kāi)發(fā)，作用同上，也用于匹配資源，但用起來(lái)簡(jiǎn)單很多。

基本用法

// gulpfile.js
gulp.task("foo", function() {
    gulp.src(glob)
        .pipe(...)
        .pipe(...)
        .pipe(gulp.dest(...))
        .pipe(...)
        .pipe(gulp.dest(...))
});

// shell
$ gulp foo

基本 API

gulp.src(glob[, options])

根據(jù) glob 匹配文件，返回 stream，可以通過(guò) .pipe() 方法傳遞給后續(xù)的插件。

gulp.dest(path[, options])

一般用法 .pipe(gulp.dest(path))，把 pipe 中的內(nèi)容按照指定的 path 寫(xiě)成文件，會(huì)自動(dòng)創(chuàng)建不存在的文件夾。

注意，可以通過(guò) .pipe 多次指定輸出的地方，具體請(qǐng)看這里

gulp.task(name[, deps], fn)

定義名為 name 的任務(wù)，定義之后就可以在命令行中使用 gulp xxx 來(lái)執(zhí)行任務(wù)。

deps 里面的任務(wù)全部完成后才會(huì)執(zhí)行 fn

deps 里面的任務(wù)都是并行執(zhí)行的，如果需要順序執(zhí)行，需要特殊寫(xiě)法。具體看這里

gulp.watch(glob[, opts, cb])

監(jiān)聽(tīng)文件變化

不會(huì)監(jiān)聽(tīng)新文件（目錄），所以一般你會(huì)需要 gulp-watch

常用命令（自定義）

# for development mode
gulp server

# run test
gulp test

# for production mode
gulp build

gulp server 流程

把 less, sass, 之類的文件編譯成 CSS，常用插件：

gulp-less

gulp-sass

創(chuàng)建 Web Server (with Live Reload)，常用：

gulp-connect，用來(lái)創(chuàng)建 Web Server，其實(shí)還有其他選擇的，但多數(shù)都是利用 connect 來(lái)創(chuàng)建 Web Server 的。

node-proxy-middle，用來(lái)代理請(qǐng)求，可以把 /api/xxx 發(fā)送到指定的地址。(常用于 SPA 開(kāi)發(fā))

connect-modrewrite，匹配資源，如果不匹配就可以重定向到指定地址。(常用于 SPA 開(kāi)發(fā))

connect-history-api-fallback，作用同上，也用于匹配資源，但用起來(lái)簡(jiǎn)單很多。(常用于 SPA 開(kāi)發(fā))

監(jiān)聽(tīng)文件變化，常用插件：

gulp-watch

示例代碼

gulp.task("clean:css", function () {
    del.sync("app/styles/*.css");
});

gulp.task("less", ["clean:css"], function () {
    var stream = gulp
            .src("app/styles/main.less")
            .pipe(less())
            .pipe(gulp.dest("app/styles/"));
    return stream;
});

gulp.task("connect", function () {
    connect.server({
        root: "./app",
        port: 9000,
        livereload: true,
        middleware: function (connect, o) {
            return [
                (function () {
                    var url = require("url");
                    var proxy = require("proxy-middleware");
                    var options = url.parse("http://localhost:3000/api");
                    options.route = "/api";
                    return proxy(options);
                })(),
                modRewrite([
                    "!.html|.js|.css|.swf|.jp(e?)g|.png|.gif|.eot|.woff|.ttf|.svg$ /index.html"
                ])
            ];
        }
    });
});

gulp.task("watch", function () {
    gulp
        .src("app/styles/**/*.less", {read: false})
        .pipe(watch("app/styles/**/*.less", function () {
            return gulp
                .src("app/styles/main.less")
                .pipe(less())
                .pipe(gulp.dest("app/styles/"))
                .pipe(connect.reload());
        }));

    gulp
        .src(["app/scripts/**/*.js", "app/**/*.html"])
        .pipe(watch(["app/scripts/**/*.js", "app/**/*.html"]))
        .pipe(plumber())
        .pipe(connect.reload());
});

gulp.task("server", ["less", "connect", "watch"]);

gulp build 流程

清理 dist/ 文件夾

del，根據(jù) glob 來(lái)刪除文件/目錄

壓縮文件

gulp-htmlmin，壓縮 html 文件

gulp-minify-html，同上

gulp-cssmin，壓縮 css 文件

gulp-minify-css，同上，封裝了 clean-css，star 比上面的多

gulp-uglify，混淆 JavaScript 代碼

gulp-usemin，合并指定 block 中的文件

gulp-rev，給靜態(tài)文件加上版本號(hào)，如 app.js -> app-d41d8cd98f.js

復(fù)制其他文件到 dist/

gulp.src(...).pipe(gulp.dest(...))

實(shí)例代碼

gulp.task("clean:build", function () {
    del.sync("dist/", {force: true});
});

gulp.task("minify", ["clean:build", "less"], function () {
    gulp
        .src("app/views/**/*.html")
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest("dist/views"));

    gulp
        .src("app/index.html")
        .pipe(usemin({
            js: [uglify(), rev()],
            css: [minifyCss(), "concat", rev()]
        }))
        .pipe(gulp.dest("dist/"));
});

gulp.task("copyfonts", function () {
    gulp
        .src("app/styles/fonts/*")
        .pipe(gulp.dest("dist/fonts/"));
});

gulp.task("build", ["clean:build", "minify", "copyfonts"]);

出處

https://scarletsky.github.io/2015/08/14/use-gulp-for-front-end-workflow/

參考資料

英文文檔
中文文檔

GPU云服務(wù)器云服務(wù)器前端工作 webrtc處理流程前端開(kāi)發(fā)流程 webrtc視頻處理流程

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85894.html

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

登陸后可評(píng)論

0條評(píng)論

Yangder

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

程序員魚(yú)皮表情包網(wǎng)站項(xiàng)目學(xué)習(xí)

閱讀 2901·2021-11-22 09:34
springboot+vue實(shí)現(xiàn)增刪查改小demo

閱讀 1223·2021-11-19 09:40
畢業(yè)3年，從銷售轉(zhuǎn)行測(cè)試工程師，我已不是那個(gè)叛逆少年...

閱讀 3349·2021-10-14 09:43
Firefox 正在測(cè)試將 Bing 作為默認(rèn)搜索引擎

閱讀 3578·2021-09-23 11:22
華納云：新人優(yōu)惠400元，中國(guó)香港高防服務(wù)器(10M-50M帶寬)，DDOS防護(hù)800G

閱讀 1611·2021-08-31 09:39
css實(shí)現(xiàn)圖片自適應(yīng)容器的幾種方式

閱讀 894·2019-08-30 15:55
vue 組件中添加樣式不生效

閱讀 1422·2019-08-30 15:54
w3c標(biāo)準(zhǔn)搬運(yùn)

閱讀 864·2019-08-30 15:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

利用 Gulp 處理前端工作流程

相關(guān)文章

**利用gulp處理簡(jiǎn)單的前端問(wèn)題**

**用gulp+mock實(shí)現(xiàn)前后端分離**

gulp-work-flow 前端工作流原來(lái)可以這么簡(jiǎn)單

webpack 3 零基礎(chǔ)入門(mén)教程 #1 - 介紹

**“流式”前端構(gòu)建工具——gulp.js 簡(jiǎn)介**

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

0條評(píng)論

Yangder

男|高級(jí)講師

TA的文章

程序員魚(yú)皮表情包網(wǎng)站項(xiàng)目學(xué)習(xí)

springboot+vue實(shí)現(xiàn)增刪查改小demo

畢業(yè)3年，從銷售轉(zhuǎn)行測(cè)試工程師，我已不是那個(gè)叛逆少年...

Firefox 正在測(cè)試將 Bing 作為默認(rèn)搜索引擎

華納云：新人優(yōu)惠400元，中國(guó)香港高防服務(wù)器(10M-50M帶寬)，DDOS防護(hù)800G

css實(shí)現(xiàn)圖片自適應(yīng)容器的幾種方式

vue 組件中添加樣式不生效

w3c標(biāo)準(zhǔn)搬運(yùn)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

利用 Gulp 處理前端工作流程

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！