利用 Gulp 处理前端工作流程

Yangder 发布于2019-08-21 10:37 / 1434人阅读

摘要：基本用法基本根据匹配文件，返回，可以通过方法传递给后续的插件。一般用法，把中的内容按照指定的写成文件，会自动创建不存在的文件夹。，用来代理请求，可以把发送到指定的地址。常用于开发，作用同上，也用于匹配资源，但用起来简单很多。

基本用法

// 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])

根据 glob 匹配文件，返回 stream，可以通过 .pipe() 方法传递给后续的插件。

gulp.dest(path[, options])

一般用法 .pipe(gulp.dest(path))，把 pipe 中的内容按照指定的 path 写成文件，会自动创建不存在的文件夹。

注意，可以通过 .pipe 多次指定输出的地方，具体请看这里

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

定义名为 name 的任务，定义之后就可以在命令行中使用 gulp xxx 来执行任务。

deps 里面的任务全部完成后才会执行 fn

deps 里面的任务都是并行执行的，如果需要顺序执行，需要特殊写法。具体看这里

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

监听文件变化

不会监听新文件（目录），所以一般你会需要 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

创建 Web Server (with Live Reload)，常用：

gulp-connect，用来创建 Web Server，其实还有其他选择的，但多数都是利用 connect 来创建 Web Server 的。

node-proxy-middle，用来代理请求，可以把 /api/xxx 发送到指定的地址。(常用于 SPA 开发)

connect-modrewrite，匹配资源，如果不匹配就可以重定向到指定地址。(常用于 SPA 开发)

connect-history-api-fallback，作用同上，也用于匹配资源，但用起来简单很多。(常用于 SPA 开发)

监听文件变化，常用插件：

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，根据 glob 来删除文件/目录

压缩文件

gulp-htmlmin，压缩 html 文件

gulp-minify-html，同上

gulp-cssmin，压缩 css 文件

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

gulp-uglify，混淆 JavaScript 代码

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

gulp-rev，给静态文件加上版本号，如 app.js -> app-d41d8cd98f.js

复制其他文件到 dist/

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

实例代码

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/

参考资料

英文文档
中文文档

超融合服务器 idc机房托管前端工作 webrtc处理流程前端开发流程 webrtc视频处理流程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85894.html

利用gulp处理简单的前端问题

摘要：利用处理和或者或者文件目录项目根目录安装包依赖之后自动生成的编译后的文件放到这里安装包依赖在中到项目目录，然后会自动安装里面写的插件，根据自己项目所需要的插件来安装下面是我的项目的一些依赖清除文件合并文件编利用gulp处理js和less或者sass或者css 文件目录 /项目根目录-gulpfile.js-package.json-/images-/src--/less--/js--...

PumpkinDylan 2019-08-29 11:28 评论0 收藏0
用gulp+mock实现前后端分离

摘要：当然需要的工具不只有这些，其他的一些可选工具还有文件压缩压缩时用到的文件重命名检查一般编辑器自带校验提示工具等等，具体根据项目需要安装。 gulp 前端自动化构建工具需要配置nodejs环境, 利用npm安装全局gulp,安装后可以输入gulp指令。 npm install gulp -g 创建项目目录、初始化npm包、gulp npm init gulp init 下载gul...

dailybird 2019-08-20 18:08 评论0 收藏0
gulp-work-flow 前端工作流原来可以这么简单

摘要：话不多说，今天的主题是使用打造传统项目的前端工作流。是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。这意味着，你可以用的方式编写程序，又不用担心现有环境是否支持。概述最近前端一直是一个火热的话题，前端技术栈也是伴随着nodejs的出现而更替的飞快，导致大部分前端开发者曾一度迷茫在这各种技术选型上，比如前端自动化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 评论0 收藏0
webpack 3 零基础入门教程 #1 - 介绍

摘要：所以它在某些程度上，跟的功能有些相同。严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。更是明显强调模块化开发，而那些文件压缩合并预处理等功能，不过是他附带的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先来说一下 webpack 是什么。 webpack 的...

张红新 2019-08-21 17:55 评论0 收藏0
“流式”前端构建工具——gulp.js 简介

摘要：流式构建改变了底层的流程控制，大大提高了构建工作的效率和性能，给用户的直观感觉就是更快。我的看法关于流式构建，短短几句话无法讲清它的来龙去脉，但是在的世界里，确实是至关重要的。 Grunt 一直是前端领域构建工具（任务运行器或许更准确一些，因为前端构建只是此类工具的一部分用途）的王者，然而它也不是毫无缺陷的，近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 评论0 收藏0