gulp基本使用

一.gulp是什么

gulp强调的是前端开发的工作流程,我们可以通过定义task事件定义事件的执行顺序,gulp去执行这些事件,构建整个前端开发的工作流程

gulp常见定义事件，例如：

变更静态资源
合成文件,把多个文件合为一个文件
监控变化,自动刷新浏览器
解析浏览器不识别的语言,如scss等

下面会说几个常见的gulp模块,列举功能和例子,希望你看完本章后能对gulp有个基本的掌握,能参照这里的写法,当需要使用时去官网上会自主查询

二.gulpAPI

　　先分别说明每个API的作用,下面会有一个总例子

　　1.src

　　创建一个流，用于从文件系统读取文件对象

　　2.series

　　接受n个参数,每个参数是函数,会依次执行这些函数.

　　3.dest

　　创建一个用于将文件对象写入到文件系统的流(就是用于在文件系统上创建文件)。第一个参数是创建文件后输出的路径

　　4.watch

　　监听指定数据的变化,当指定数据改变时会执行回调函数,刷新浏览器

结合上面的API,我们写个例子,目的是将位于src/view文件下的html页面,复制到/dev目录下,并监听html文件

const {src,series,dest,watch}=require('gulp');

const gulpServer=require('gulp-webserver')

function copyHtml(cb) {

    //复制src/view下的所有html文件

    return src('./src/view/**/*.html')

    .pipe(dest('./dev'))

}

//gulp-webserver是用来提供server服务的

function startGulp(){

    src('./dev')

    .pipe(gulpServer({

        port:9000,

        host:'127.0.0.1',

        //热更新

        livereload:true,

        //自动打开浏览器

        open:true

    }))

}

//监听所有的html文件,当文件改变时执行回调,并刷新浏览器

watch('./src/view/**/*.html',(cb)=>{

    copyHtml();
    //cb这个方法要调用,否则会出现偶尔监听不到的情况
　　cb()

})

//series会按顺序执行参数函数

exports.default=series(copyHtml,startGulp)

三.gulp常用第三方插件

　　1.gulp-scss

　　yarn add node-sass gulp-sass -D,用于编译scss文件

　　2.gulp-concat

　　yarn add gulp-concat -D //文件的合并

　　3.gulp-webserver

　　yarn add gulp-webserver -D //搭建研发的server,默认索引页

结合上面的所有内容,我们写个例子,目的是将多个scss文件合并编译为一个css文件,并输出到/dev文件中

//gulpfile.js
const {src,series,dest,watch}=require('gulp');

const gulpServer=require('gulp-webserver')

const scss=require('gulp-sass');

const concat=require('gulp-concat')

function copyHtml(cb) {

    //复制src/view下的所有html文件

    return src('./src/view/**/*.html')

    .pipe(dest('./dev'))

}

function complieScss(){

    return src('./src/style/*.scss')

    .pipe(scss().on('error',scss.logError))

    .pipe(concat('all.css'))

    .pipe(dest('./dev'))

}

function startGulp(){

    src('./dev')

    .pipe(gulpServer({

        port:9000,

        host:'127.0.0.1',

        //热更新

        livereload:true,

        //自动打开浏览器

        open:true

    }))

}

watch('./src/style/*.scss',(cb)=>{

    complieScss();

//cb这个方法要调用,否则会出现偶尔监听不到的情况
　　cb()

}) //也可以是module.exports.default,下面是简写,gulp是基于node环境运行的,gulp遵守node模块规范 exports.default=series(copyHtml,complieScss,startGulp)

在src/view/index.html中引入all.css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <link rel="stylesheet" href="./all.css">

    <title>Document</title>

</head>

<body>

    nihao!my name is didi

</body>

</html>

命令行中执行gulp,会自动打开浏览器,我们就可以查看样式是否是我们配置的了