教新手小白如何使用gulp快速搭建一个静态服务器

1、什么是gulp？

• gulp是一个自动的打包工具，前端开发者可以使用gulp来处理常见任务，快速的编写代码，提高工作效率。

2、gulp能做些什么？

• gulp是基于Nodejs的自动任务运行器，它拥有搭建静态服务器，文件保存时自动重载浏览器，使用预处理器如sass\less，优化资源，比如压缩css，压缩javascript，压缩图片等等强大的功能。

3、gulp的安装

• 前面说了gulp是基于Nodejs的，所以我们需要先安装node
• 在node环境下安装全局的gulp，-g是安装全局的意思

npm i gulp -g

• 在再项目中安装局部的gulp

npm i gulp --save-dev

4、开始搭建静态服务器

• 先来个最简单的

//先引入gulp
const gulp = require("gulp")
//再引入静态服务器 browser-sync 使用npm i broswer-sync -g 全局安装
const broswer = requier("browser-sync").create()
gulp.task = ("default" , function(){ 
    broswer.init({
      server : "./",
      port : 4001
  })
})

在终端输入gulp执行

E:\1000phone_2\SZ-GP4\codeing-m\week7\liveServer>gulp

出现以下效果说明静态服务器搭建成功

1.png

• 接下来我们给这个静态服务器添加任务

gulp.task("resetJs" , function(done){
    gulp.src("./js/**/*.*") // 选中当前目录下js文件夹中的所有文件
    .pipe(plugins.babel({
        presets: ['@babel/env']
    }))
    .pipe(plugins.concat("main.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("main.min.js"))
    .pipe(gulp.dest("./dist/js/"))
    .on("end" , browser.reload);
    done();
})

• 在default任务中监听resetJs

gulp.task("default" , function(done){
    browser.init({
        server : "./",
        port : 4010,
    });
    gulp.watch("./js/**/*.*" , gulp.series(["resetJs"]));
    done();
}) 

这样我们就成功的给这个静态服务器添加了任务

5、gulp常用插件

• 自动加载插件 ： gulp-load-plugins

npm i gulp-load-pluigns --save-dev

• 压缩文件 ： gulp-uglify

npm i gulp-uglify --save-dev

• 重命名 ：gulp-rename

npm i gulp-rename --save-dev

• css文件压缩： gulp-minify-css

npm i gulp-minify-css --save-dev

• html文件压缩：gulp-minify-html

npm i gulp-minify-html --save-dev

• 文件合并：

npm i gulp-concat --save-dev

• sass解析 ：gulp-sass

npm i gulp-sass --save-dev