开始使用gulp（原生gulp）

Posted 2021-04-08 前端日常学习

开始使用gulp

        .1. 实现功能将线下版本的文件放在线上版本中

            1》在命令行中输入gulp，提示没有gulpfile文件，需要手动创建固定文件名gulpfile.js文件

                在该文件中引入gulp模块，let gulp = require("gulp");

            

            注意：因为node完美支持ES6，所以在node环境中可以使用ES6点所有语法

            2》gulp为gulp模块返回的对象，在这个对象中，有一些方法

                gulp.task("指令名字",()=>{指令执行函数})    绑定指令的方法

                gulp.task("index",()=>{

                    //gulp.src()//找到源文件的目录

                    //gulp.pipe()//在连缀之中继续调用gulp方法

                    //gulp.dest()//转存方法

                    //实现功能的时候，一定要用ruturn

                    return gulp.src("index.html").pipe(gulp.dest("dist"));

                })

                

                在gulp.src中可以接收数组，表示多个文件

                    文件名可以用*代替，表示通配

                    **/*表示多层文件夹嵌套

                    !文件路径，表示除了此文件

            3》gulp.watch()监控

                gulp.task("watch",()=>{

                    //监控index.html文件，如果发生改变，那么执行index指令

                    gulp.watch("index.html",["index"]);

                })

                

        5.2 gulp原生默认指令（default）：

            default 为gulp自带默认指令，当在命令行中执行gulp后不跟任何指令名的时候，所执行的指令

            gulp.task("default",["hello"]);  //第二个参数为要执行的命令名，可以接受多个，表示默认执行的指令

gulp插件（服务器插件）创建本地服务

    1.安装插件（插件只有局部，没有全局，所以要安装在项目文件夹中）

        npm install gulp-connect

    2.引入插件

        在gulpfile文件中引用let connect = require("gulp-connect");

    3.配置gulp-connect

        gulp.task("server",()=>{

            connect.server({

                root:"dist",     //以哪个文件夹为服务器

                port:8888        //端口号

                livereload:true  //是否可以自动刷新

            })

        })

        如果要实现保存自动刷新功能，首先需要在index指令中调用connect插件

            return gulp.src("index.html").pipe(gulp.dest("dist")).pipe(connect.reload());

        其次需要同时运行服务器指令和监测指令，可通过默认指令实现

            gulp.task("default",["server","watch"]);

            表示先打开server，再打开watch，就可以进行实时监测，实现本地修改保存，服务器自动修改