gulp之几个常用插件介绍
今天给大家分享一篇gulp几款插件的使用
以下代码用到得模块加载‘
const gulp=require("gulp");
const gulpSass=require("gulp-sass");
const gulpAutoprefixer=require("gulp-autoprefixer");
const gulpCssmin=require("gulp-cssmin");
const gulpBabel=require("gulp-babel");
const gulpUglify=require("gulp-uglify");
const gulpHtmlmin=require("gulp-htmlmin");
const gulpWebserver=require("gulp-webserver")
1、将sass或者scss文件添加上内核转成我们使用的css文件
gulp.task("getCss",()=>{
return gulp.src("./src/scss/*.{scss,sass}")
.pipe(
//将scss编译成css的函数
gulpSass()
)
.pipe(
//添加内核
gulpAutoprefixer({
browsers: ['last 2 versions'],
cascade: false
})
)
.pipe(
gulp.dest("./src/css/")
)
})
2、压缩css
gulp.task("minCss",()=>{
return gulp.src("./src/css/*.css")
.pipe(
gulpCssmin()
)
.pipe(
gulp.dest("./dist/css/")
)
})
3、js压缩
gulp.task("minJS",()=>{
return gulp.src("./src/js/*.js")
.pipe(
gulpBabel()
)
.pipe(
gulpUglify()
)
.pipe(
gulp.dest("./dist/js/")
)
})
gulp.task("htmlmin",()=>{
return gulp.src("./src/index.html")
.pipe(
gulpHtmlmin({
collapseWhitespace: true,
minifyJS:true,//压缩页面js
minifyCSS:true//压缩页面css
})
)
.pipe(
gulp.dest("./dist/")
)
})
5、起服务
gulp.task("server",()=>{
return gulp.src("./src")
.pipe(
gulpWebserver({
host:"localhost",
port:8000,
// middleware:[static,router],
//设置一个代理
proxies:[
{
source:"/api/aa",
target:"http://localhost:3000/api/aa"
}
] })
)
})
这里使用了代理模式的服务 还有很多可以去官网看看
7、
gulp.parallel()//并行运行任务 同时
gulp.series();//运行任务序列 按顺序
gulp.task("dev",gulp.parallel("任务一","任务二"))
如果任务三必须在任务一之后运行 语法如下
gulp.task("dev",gulp.parallel(gulp.series("任务一","任务三"),"任务二"))
8、总结
gulp.src
导入文件
gulp.task
定义任务
gulp tasknamg
gulp.dest
输出
gulp.watch
监听文件变化
gulp.parallel
设置并行任务
gulp.series
设置顺序任务
-----------------------
gulp 自动化构建任务的工具
babel babel是一个js的编译器
---------------------------
使用插件
1.下载插件 (全局安装下载一次)
2.引入插件
3.调用插件
1.编译scss gulp-sass
2.添加浏览器内核 gulp-autoprefixer
3.压缩js gulp-uglify
4.js语法转换 gulp-babel .babelrc配置 presets字段设置语法转换规则 @babel/preset-env
5.压缩 gulp-hmtlmin
6.压缩css gulp-cssmin
7.起服务 gulp-webserver
8.压缩图片 gulp-imagemin
gulp之几个常用插件介绍的更多相关文章
- Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN
Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...
- subline text3常用插件介绍
常用插件介绍: html beautify(ctrl+shift+alt+f) 自动排版代码 Emmet 输入少量代码后摁Tab键,系统自动补全代码. AutoFileName 快速列出你想引用的文 ...
- Notepad++前端开发常用插件介绍
Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- 【转载】Grunt常用插件介绍
项目名称 grunt-contrib v0.8.0 项目地址 https://github.com/gruntjs/grunt-contrib 项目介绍 此项目是对grunt常用插件的集合,刚接触gr ...
- idea常用插件介绍
常用插件 mybatis mapper 选择plugins,搜索mybatis plugin 激活教程 使用 插件的使用
- sublime text 3 15个常用插件介绍
1.ColorPicker 功能:调色板(需要输入颜色时,可直接选取颜色) 使用:快捷键Windows: ctrl+shift+c 2.Emmet 功能:编码快捷键,前端必备 使用:在输入代码段后,按 ...
- VS2010常用插件介绍
今天在写JS时,写到500多行时,感觉代码已经很难看了.想到C#代码都有折叠功能,是不是JS也有呢.在选项中找了一下,没有相关了的设置功能,于是就上网找.一找可就不得了,发现了好多好用的插件.都可以在 ...
- VS2010常用插件介绍之Javascript插件(一)
引自:http://blog.csdn.net/cyxlzzs/article/details/6583577 今天在写JS时,写到500多行时,感觉代码已经很难看了.想到C#代码都有折叠功能,是不是 ...
随机推荐
- php 空格无法替换,utf-8空格惹的祸
一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...
- 一、Asp.Net Core WebAPI——修改默认监听端口
参考文档 添加host.json文件 { "urls": "https://localhost:44389;http://localhost:44380" } ...
- LINUX下OA搭建
- 021.6 IO流 练习
#######################################################################################获取指定目录下所有的.ja ...
- Alpha Scrum7
Alpha Scrum7 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:项目发布 陈远军.陈彬:播放器各环境的测试 项目的发布说明 本版本的新 ...
- Running Protractor Tests on Docker
配置这个Protractor环境真是折磨死人了,webdriver-manage update怎么都不成功,即使自己下载好chromederiver放到相应文件夹下,也不能使用.费时三四天终于按照ht ...
- 【1】【MOOC】Python游戏开发入门-北京理工大学【第二部分-游戏开发之框架】
学习地址链接:http://www.icourse163.org/course/0809BIT021E-1001873001?utm_campaign=share&utm_medium=and ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- [SCOI2005]互不侵犯(状压DP)
嗝~算是状压DP的经典题了~ #\(\mathcal{\color{red}{Description}}\) 在\(N×N\)的棋盘里面放\(K\)个国王,使他们互不攻击,共有多少种摆放方案.国王能攻 ...
- Selenium自动化测试之数据驱动及用例管理
Selenium自动化测试之数据驱动及用例管理 一.TestNg注解介绍 @Test:表示一个测试方法,在运行测试用例过程中,会自动运行@Test注解的方法. 例: