新手小白快速使用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
m i gulp-concat --save-dev
  • sass解析 :gulp-sass
npm i gulp-sass --save-dev
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页