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