今天给大家分享一篇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-babel这款插件是对es6转成es5语法 因为es6不能直接压缩 然后需要配置一个.babelrc文件 里面是{"presets": ["@babel/preset-env"]}
 
4、压缩html
 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之几个常用插件介绍的更多相关文章

  1. Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN

    Notepad++前端开发常用插件介绍 - BorisHuai前端修炼 - 博客频道 - CSDN.NET http://blog.csdn.net/borishuai/article/details ...

  2. subline text3常用插件介绍

    常用插件介绍:  html beautify(ctrl+shift+alt+f) 自动排版代码 Emmet 输入少量代码后摁Tab键,系统自动补全代码. AutoFileName 快速列出你想引用的文 ...

  3. Notepad++前端开发常用插件介绍

    Notepad++前端开发常用插件介绍 Notepad++除了自身的功能强大之外,更是有许多非常的优秀的插件,下面就总结一下前端开发过程一些比较常用的插件. Emmet Emmet的前身是Zen Co ...

  4. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  5. 【转载】Grunt常用插件介绍

    项目名称 grunt-contrib v0.8.0 项目地址 https://github.com/gruntjs/grunt-contrib 项目介绍 此项目是对grunt常用插件的集合,刚接触gr ...

  6. idea常用插件介绍

    常用插件 mybatis mapper 选择plugins,搜索mybatis plugin 激活教程 使用 插件的使用

  7. sublime text 3 15个常用插件介绍

    1.ColorPicker 功能:调色板(需要输入颜色时,可直接选取颜色) 使用:快捷键Windows: ctrl+shift+c 2.Emmet 功能:编码快捷键,前端必备 使用:在输入代码段后,按 ...

  8. VS2010常用插件介绍

    今天在写JS时,写到500多行时,感觉代码已经很难看了.想到C#代码都有折叠功能,是不是JS也有呢.在选项中找了一下,没有相关了的设置功能,于是就上网找.一找可就不得了,发现了好多好用的插件.都可以在 ...

  9. VS2010常用插件介绍之Javascript插件(一)

    引自:http://blog.csdn.net/cyxlzzs/article/details/6583577 今天在写JS时,写到500多行时,感觉代码已经很难看了.想到C#代码都有折叠功能,是不是 ...

随机推荐

  1. php 空格无法替换,utf-8空格惹的祸

    一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...

  2. 一、Asp.Net Core WebAPI——修改默认监听端口

    参考文档 添加host.json文件 { "urls": "https://localhost:44389;http://localhost:44380" } ...

  3. LINUX下OA搭建

  4. 021.6 IO流 练习

    #######################################################################################获取指定目录下所有的.ja ...

  5. Alpha Scrum7

    Alpha Scrum7 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:项目发布 陈远军.陈彬:播放器各环境的测试 项目的发布说明 本版本的新 ...

  6. Running Protractor Tests on Docker

    配置这个Protractor环境真是折磨死人了,webdriver-manage update怎么都不成功,即使自己下载好chromederiver放到相应文件夹下,也不能使用.费时三四天终于按照ht ...

  7. 【1】【MOOC】Python游戏开发入门-北京理工大学【第二部分-游戏开发之框架】

    学习地址链接:http://www.icourse163.org/course/0809BIT021E-1001873001?utm_campaign=share&utm_medium=and ...

  8. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  9. [SCOI2005]互不侵犯(状压DP)

    嗝~算是状压DP的经典题了~ #\(\mathcal{\color{red}{Description}}\) 在\(N×N\)的棋盘里面放\(K\)个国王,使他们互不攻击,共有多少种摆放方案.国王能攻 ...

  10. Selenium自动化测试之数据驱动及用例管理

    Selenium自动化测试之数据驱动及用例管理 一.TestNg注解介绍 @Test:表示一个测试方法,在运行测试用例过程中,会自动运行@Test注解的方法. 例: