Gulp

最新推荐文章于 2024-05-30 10:17:46 发布
最新推荐文章于 2024-05-30 10:17:46 发布
阅读量782 收藏 2
点赞数
分类专栏： 打包压缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M106588L/article/details/94381193
版权
gulp是一个前端自动化构建工具，基于流的构建系统，主要优点是速度，效率和简化
gulp可以干什么？
开发服务器，Sass,Less或Stylus文件的预处理器，处理JavaScript的自动化脚本，代码优化工具，压缩，编译或移动文件
gulp的官网：https://www.gulpjs.com.cn/

gulp类似的工具：grunt webpack

gulp是基于node.js的，gulp和所有插件都通过JavaScript编写并依托Node.js平台

1.gulp优点：
  1. 易于使用
  2. 构建快速
  3. 插件高质
  4. 易于学习
2.gulp的安装

全局安装 -> 使用gulp的命令

npm install gulp -g (4.0)
npm install gulp@next -g （3.9版本）

执行gulp -v 查看gulp的版本号

局部安装 -> 配置文件内依赖gulp

在本地下载 
npm install gulp --save-dev(4.0)
3.gulp api

1.gulp.task(name,[deps],fn) //建任务

name:任务名 string

任务名为default :  执行 ---> gulp 

任务名为minJs : 执行 ---> gulp 任务名

2.gulp.src(globs,[options]) //读文件

globs 数据类型：string/array 查找文件的规则

  • 通配符路径匹配
  1. “src/a.js”

指定具体文件；

  1. “*”：匹配所有文件

例：src/*.js(包含src下的所有js文件)；

  1. “**”：匹配0个或多个子文件夹

例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；

  1. “{}”：匹配多个属性

例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

  1. “!”：排除文件

例：!src/a.js(不包含src下的a.js文件)；

3.gulp.dest(输出的路径) //输出文件

4.gulp.serise(task1,task2,…) 设置任务的执行顺序 串行执行

5.gulp.parallel(task1,task2,…) 设置任务的执行顺序 并行执行

6.gulp.watch(globs,gulp.serise/gulp.parallel(task1,task2…)) 监听文件变化，执行任务

gulp插件
插件说明
gulp-sass编译scss
gulp-less编译less
gulp-autoprefixer自动添加前缀
gulp-concat合并文件
gulp-clean-css压缩css
gulp-webserver起服务
browser-sync起服务
gulp-htmlmin压缩html
gulp-imagemin压缩图片
gulp-uglify压缩js 不支持ES6
gulp-baibel | 编译ES6--->ES5
gulp-rev | 生成文件后缀

gulp-rev-collector | 替换文件路径
gulp-rename| 修改文件名和路径
gulp-filter | 过滤文件js文件

编译scss 与sass
 "gulp-sass": "^3.1.0"

var gScss = require('gulp-sass');
gulp.task('scss1', function() {
    return gulp.src('./origin/*.scss') //指定scss文件 
        .pipe(gScss())//调用引入的文件 它抛出的是一个函数执行就行
        .pipe(gulp.dest('./detection'));
});
编译less
 "gulp-less": "^3.4.0"

var gLess = require('gulp-less');
gulp.task('less', function() {
    return gulp.src('./origin/*.less')
        .pipe(gLess())
        .pipe(gulp.dest('./detection/'));
});
自动添加前缀
gulp-autoprefixer

var autoprefixer = require("autoprefixer");
gulp.task('autopre', function() {
    return gulp.src("src/css/*.css")
        .pipe(autoprefixer({
            browsers: ['last 2 versions'] //离你最近的两个浏览器版本
        )) 
        .pipe(gulp.dest("dist")); //生成新文件
})
合并文件
gulp-concat

var concats = require('gulp-concat');
gulp.task('concat', function() {
    return gulp.src('./detection/*.css') //需要合并的文件
        .pipe(concats('all.css')) //合并后的文件名
        .pipe(gulp.dest('./dest/')); //合并后存贮的位置
});
压缩css
 "gulp-clean-css"

var miniCss = require('gulp-clean-css');
gulp.task('minicss', function() {
    return gulp.src('./detection/style.css')
        .pipe(miniCss())
        .pipe(gulp.dest('./zlib/'));
});
起服务 gulp-webserver
port ：配置端口号
open: 自动打开浏览器
livereload: 自动刷新
host: 配置IP
fallback: 指定默认打开的文件
middleware:function(req,res,next){ //拦截前端请求
    
}
压缩html
"gulp-htmlmin": "^4.0.0"

var miniHtml = require('gulp-htmlmin');
gulp.task('miniH', function() {
    return gulp.src('./detection/index.html')
        .pipe(miniHtml({
            collapseWhitespace: true, //压缩HTML
          
        }))
        .pipe(gulp.dest('./zlib/'))
});
miniHtml参数
{
    removeComments: true,//清除HTML注释
    collapseWhitespace: true,//压缩HTML
    collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
    removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
    
}
压缩图片
"gulp-imagemin": "^4.1.0"//压缩jpg  jpeg

var imagemin = require('gulp-imagemin');
gulp.task('testImagemin', function() {
    return gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('dist/img'));
});
压缩js
"gulp-uglify": "^3.0.0"

var uglify = require('gulp-uglify');
gulp.task('uglify', function() {
    return gulp.src('./detection/a.js')
        .pipe(uglify())
        .pipe(gulp.dest('./zlib/'));
});
uglify参数
{
    mangle: true,//类型：Boolean 默认：true 是否修改变量名
    mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字
    compress: true,//类型：Boolean 默认：true 是否完全压缩
    preserveComments: 'all' //保留所有注释
}
编译es6
 "gulp-babel": "^7.0.0"
 "babel-core": "^6.26.0" 
 "babel-preset-es2015": "^6.24.1"

var babel = require('gulp-babel');//引入gulp-babel  但是：还得安装 babel-core 和 babel-preset-es2015
gulp.task('babel', function() {
    return gulp.src('./origin/a.js') //需要编译的文件
        .pipe(babel({
            presets: 'es2015' //指定编译后的版本为es5
        }))
        .pipe(gulp.dest('./detection/')); //编译后存放文件的路径
});
md5 添加前缀
 "gulp-rev-collector": "^1.2.4" //路径替换

var rev = require('gulp-rev');
var collector = require('gulp-rev-collector');
gulp.task('revs', function() {
    return gulp.src('./detection/style.css') //读取css
        .pipe(rev())
        .pipe(gulp.dest('./rev/')) //前缀添加完毕后存放文件的位置
        .pipe(rev.manifest()) // json
        .pipe(gulp.dest('./view/')); //存放json文件的地方
})
gulp.task('cols', function() {
    return gulp.src(['./view/rev-manifest.json', './detection/index.html']) //读取json文件  抓取HTML中对应的文件并且取代
        .pipe(collector({ //参数设置 
            replaceReved: true // 是否前缀被改变后可再次被取代
        }))
        .pipe(gulp.dest('./view/')); //存放修改文件链接后的html文件
})
代理
gulp.task('server',function(){
	return gulp.src('member-ui')
		.pipe(webserver({
			port:8989,
			proxies:[
				{
					source:"/api/add",target:"http://192.168.1.108:3000/api/add"
				},
				{
					source:"/api/del",target:"http://192.168.1.108:3000/api/del"
				},
				{
					source:"/api/detail",target:"http://192.168.1.108:3000/api/detail"
				}
			]
		}));
});
开启服务
gulp.task('server',function(){
    return gulp.src('src')
    .pipe(webserver({
        port:9090, //端口号
        open:true, //自动浏览器
        linverload:true //自动打开刷新
    }))
})
前端拦截
gulp.task('webserver', function() {
    return gulp.src('./')
        .pipe(webserver({
            livereload: true, //自动刷新浏览器
            open: true, //打开浏览器
            port: 8080,
            middleware: function(req, res, next) {
                var pathname = url.parse(req.url).pathname;
                if (pathname === "/api/list") {
                    res.end(JSON.stringify({ code: 1, data: 'hello,world!' }));
                } else {
                    pathname = pathname === '/' ? "index.html" : pathname;
                    res.end(fs.readFileSync(path.join(__dirname, pathname)));
                }
            }
        }))
})
开发坏境
gulp.task('dev',gulp.series('任务名','任务名'))
线上环境
gulp.task('build',gulp.parallel('任务名','任务名'))
操作gulp全部例子
const gulp = require("gulp");

//直接编译common
gulp.task("common", () => {
    return gulp.src("./src/common/axios.js")
        .pipe(gulp.dest("./build/common"))
})

const gulpSass = require("gulp-sass");
const gulpConcat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-clean-css");
//编译scss
gulp.task("devCss", () => {
    return gulp.src("./src/styles/*.scss")
        .pipe(gulpSass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(cssmin())
        .pipe(gulp.dest("./build/styles"))
})
//运行gulp devCss就可以编译scss

//编译 js'
//因为只有一个js文件，所以不用合并
const babel = require("gulp-babel");
const uglify = require("gulp-uglify")
gulp.task("devJs", () => {
    return gulp.src("./src/scripts/*.js")
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest("./build/scripts"))
})
//运行gulp devJs就可以编译js

//编译html
const htmlMin = require("gulp-htmlmin")
gulp.task("devHtml", () => {
    return gulp.src("./src/*.html")
        .pipe(htmlMin({
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeComments: true
        }))
        .pipe(gulp.dest("./build"))
})
//运行gulp devHtml就可以编译html

//监听css，js,html
gulp.task("watch", () => {
    gulp.watch("./src/styles/*.scss", gulp.parallel("devCss"))
    gulp.watch("./src/scripts/*.js", gulp.parallel("devJs"))
    gulp.watch("./src/*.html", gulp.parallel("devHtml"))
    gulp.watch("./src/common/axios.js", gulp.parallel("common"))
})


//起服务
const webServer = require("gulp-webserver");
gulp.task("serverFs", () => {
    return gulp.src("./build") //. 代表当前目录下找index.html
        .pipe(webServer({
            host: "localhost",
            port: 3636,
            //fallback: "index.html", //默认打开文件夹名
            open: true, //自动打开浏览器
            livereload: true, //自动刷新页面
            proxies: [{
                //事件代理
                source: "/getlist",
                target: "http://localhost:6363/getlist"
            }]
        }))
})
gulp.task("serverDate", () => {
    return gulp.src("./build")
        .pipe(webServer({
            host: "localhost",
            port: 6363,
            middleware: ((req, res) => {
                //中间键 有他他上面的代码就不会执行
                console.log(req.url)
                res.end("11")
            })
        }))
})
gulp.task("server", gulp.parallel("watch", "serverFs", "serverDate"))
gulp的不同方法

const server = require("gulp-webserver");
const connect = require("gulp-connect");
const proxy = require("http-proxy-middleware")



gulp.task("serverOne", () => {
    gulp.src(".")
        .pipe(server({
            host: "localhost",
            port: 3000,
            livereload: true,
            open: true,
            directoryListing: true,
            middleware: (req, res) => {
                if (req.url === "/api") {
                    const result = fs.readFileSync("./static/data.json");
                    // res.end(JSON.stringify(result.toString()))
                    res.end("this is api")

                }
            }
        }))
})


gulp.task("webserver", () => {
    connect.server({
        host: "localhost",
        root: ["."],
        name: "connect",
        port: 8080,
        fallback: "./index.html",
        middleware: (con, opt) => {
            return [
                proxy("/api", {
                    target: "http://localhost:3000",
                    changeOrigin: true,
                })
            ]
        }
    })
})

gulp.task("default", ["serverOne", "webserver"])
微光时空
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp管理版本号
05-06
【gulp管理版本号】是指在开发过程中，使用Gulp自动化构建工具来管理和更新项目的版本号。Gulp是一个基于Node.js的构建系统，它允许开发者通过编写任务来自动化复杂的项目构建流程，包括版本号的管理。 首先，安装*...
gulpDemo
02-14
【gulpDemo】是一个针对前端开发的实践项目，主要利用了`gulp`这一自动化构建工具来提升工作效率。在前端开发过程中，我们经常会遇到诸如文件编译、压缩、合并、自动刷新等重复性工作，`gulp`就是为了解决这些问题而...
安装Gulp
keailan_的博客
03-21 208
如何安装gulp工具
gulp入门10：gulp-webserver搭建热加载服务器
计算机图形学
05-30 661
是一个用于搭建本地开发服务器的插件，它可以与gulp一起使用，提供实时刷新浏览器、目录列表显示等功能，从而提高前端开发效率。以下是关于。
gulp
weixin_45183986的博客
09-28 211
gulp Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。 使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量 - 把一个文件拷贝到另一个位置 把多个js或css文件合并成一个文件，以减少网络请求数 对js文件和css文件进行压缩合并 以减少网络流量 压缩图像文件，以减少网络流量 创建一个可以实...
了解gulp
别来...无恙*的博客
02-28 736
简单了解gulp 在日常开发中，我们往往会用到很多前端的构造工具，我们常见的有Node,NPM,Grunt,Gulp…，很多很多，上一篇博客中已经简单的介绍了npm，这里再简单讲解一下gulp。 什么是gulp gulp是前端自动化打包工具，主要用来设定程序自动处理静态资源的工作，gulp运行必须依赖 node 环境。 gulp 安装 因为gulp是一个全局工具，所以直接使用npm安装gulp工...
gulp的使用
m0_52634705的博客
06-22 498
gulp的使用 一、了解gulp 1、前端自动化打包工具 gulp是前端自动化打包工具，gulp运行时依赖node环境。使用gulp先手动编辑好步骤，gulp会根据步骤自动对代码进行压缩/混淆/合并。 2、流（stream）/了解/ 当你使用代码读取磁盘上的内容时，不是立即把磁盘上的内容给你看，而是处理成我们不认识的二进制形式，当这个二进制的格式被包裹以后，就是一个可以直接使用方法的二进制，我们将这个东西叫做二进制流。 3、gulp版本问题 目前市面上流行两种gulp版本： gulp@3.x.x —&
gulp工具
sdkjje的博客
03-22 89
gulp是用javascript语言编写的运行在Node.js平台开发的前端构建工具。gulp-cli：启动构建工具的命令行接口本地gulp：构建时实际运行的程序gulpfile.js：告诉gulp如何构建软件的指令文件gulp插件：用于合并、压缩、修改文件的插件。
gulp配置
weixin_45712583的博客
07-01 375
总结gulp的配置
gulp的安装与使用
weixin_58978252的博客
04-11 4379
gulp 什么 是gulp？ Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务： 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass、LESS 优化资源，比如压缩CSS、JavaScript、压缩图片 gulp的安装： npm初始化，新建package.json npm init -y 先安装全局 npm install gulp -g 再需要在当前项目中安装 npm install gulp 装两遍是为了版本的灵活性 开始使用gulp 在根目录下新建gulpfil
gulp安装及使用
weixin_61519853的博客
03-21 964
关于gulp的安装和使用
Gulp压缩
Black_Straight的博客
06-05 572
Gulp压缩
gulp的简单搭建
04-13
**gulp的简单搭建** 在现代前端开发中，自动化构建工具起着至关重要的作用，它们能够帮助我们提升工作效率，简化重复性工作。其中，`gulp`是一个流行的选择，它基于流的构建系统，允许开发者通过编写任务来自动化...
gulp教程简单介绍
06-17
### Gulp教程简单介绍 #### Gulp概述 Gulp 是一个基于 Node.js 的自动化构建工具，主要用于前端资源的处理工作，如文件合并、压缩、编译等任务。它通过流式处理的方式，使得整个构建过程更为高效且易于扩展。Gulp ...
基于layui框架使用gulp工具搭建的后台模板
02-18
而gulp则是一个自动化构建工具，它可以极大地提高开发效率，通过预处理、编译、合并、压缩等任务来简化工作流程。现在我们来详细探讨如何基于layui和gulp来搭建一个后台模板。 首先，layui框架的核心特点是简洁、...
聊天室、websocket、socket.io、毕业设计.zip
07-27
聊天室、websocket、socket.io、毕业设计.zip
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
最新发布
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
防盗门进销存管理系统（SDIMS）.zip
07-27
防盗门进销存管理系统（SDIMS）.zip
gulp watch
06-04
Gulp是一个基于流的自动化构建工具，可以自动化地执行常见的开发任务，如文件压缩、文件合并、代码检查等。gulp watch是gulp的一个插件，它可以监听文件的变化，当文件被修改时，自动执行对应的任务。这个插件可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值