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-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