码迷,mamicode.com
首页 > 其他好文 > 详细

gulp基本使用

时间:2020-04-19 00:44:53      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:需要   html   网上   func   UNC   oge   ini   open   pipe   

一.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‘,()=>{
    copyHtml()
})
//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‘,()=>{ complieScss() }) //也可以是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,会自动打开浏览器,我们就可以查看样式是否是我们配置的了

gulp基本使用

标签:需要   html   网上   func   UNC   oge   ini   open   pipe   

原文地址:https://www.cnblogs.com/liuXiaoDi/p/12728763.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!