前端---基于gulp的打包与热更新-优快云博客

本文介绍如何利用Gulp这一基于Node流的构建工具，为一个非浏览器环境的桌面应用项目实现自动化构建流程，包括热更新、文件压缩、合并及资源路径调整，适用于前后端不分离的小型项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前几天公司需要重构一个古老版本的项目，其实也不古老，去年6月份开发的一个桌面应用项目，主要是为了做兼容硬件设备，并不是在平时用的浏览器（类似于汽车里面的导航屏幕类的设备）。曾使用过Vue写过一个版本，但是硬件不支持Vue，所以使用了JQuery1跟Bootstrap以及Gulp来进行热更新跟打包。

应用场景

gulp是一种基于node流的一款简单且快速的构建工具，上次跟同事聊前端的快速迭代，他说前端是为了更新而更新（做了一些没有必要的更新）。其实一些老的方法对于某些项目也是比较方便的，虽然现在主要流行的webpack，当处理简单的html，css，js等前后端不分离的项目，我个人觉得gulp还是不错的。

gulp的安装

全局安装，在项目里面在进行一次安装3.9.0（4.0.0会报错，好像指令变了）

npm i -g gulp
npm init
npm i -D gulp@3.9.0复制代码

gulp的使用

假如咱们的项目结构是这样的，新建一个gulpfile.js 的文件，作为项目构建的入口

目标结构是这样的

将css文件下的所有css文件打包成index.min.css
将less文件下的所有less文件打包成main.min.css
将extend文件下的所有第三方引入的css更换路劲
将js文件下的所有js文件打包成main.min.js

那么如何使用gulp做呢？

这是pageage.json 下载的gulp插件（有很多插件，我只是举个荔枝）

 "devDependencies": {   
     "gulp": "^3.9.0",
     "gulp-concat": "^2.6.1",   
     "gulp-connect": "^5.7.0",
     "gulp-htmlmin": "^5.0.1",  
     "gulp-imagemin": "^5.0.3",  
     "gulp-less": "^4.0.1",  
     "gulp-minify-css": "^1.2.4", 
     "gulp-uglify": "^3.0.2" 
 }复制代码

在gulpfile里面我们去引用他们

    var gulp =require("gulp");
    var connect = require('gulp-connect');// 启动服务
    var concat=require('gulp-concat');   //合并文件
    var less = require('gulp-less');     // 转less
    var jsuglify = require('gulp-uglify');// 压缩js
    var cssminify = require('gulp-minify-css');//压缩css
    var imageMin = require('gulp-imagemin'); // 压缩img
    var htmlmin = require('gulp-htmlmin');//压缩html复制代码

开始构建

gulp 的官方api

    gulp.task("任务名称",function(){          })
    gulp.src('路劲') // 可读流
    .pipe(gulp.dest('目标路劲') ) //管子  --->  可写流
复制代码

先启动一个端口，以便进行热更新预览

//   服务，端口    
gulp.task("server",function(){
        connect.server({ 
           root:"dist",// 路径 
           livereload:true,
            port:8080 
       })  
  })复制代码

热更新监听src下面任何文件的改动

//  热更新
gulp.task("reload",function(){
   gulp.src("./src/**/*.*") 
   .pipe(connect.reload());
})复制代码

dev 模式跟build模式
监听src文件改动执行build任务更新dist 文件，在执行reload重置浏览器进行热更新

 gulp.task("watch",function(){ 
   gulp.watch("./src/**/*.*", ["build","reload"]);//监听src下所有文件
})
gulp.task("dev",["server",'watch'],function(){ // function可以不传 
   console.log("dev")
}) 复制代码

打包生成dist文件

gulp.task("build",['html','css','extendcss','less','js','image'])
 // 依次执行后面 [] 的任务进行打包复制代码

在这个build的任务中，我们执行了'html','css','extendcss','less','js','image'等任务

建立任务

//   css
gulp.task("css",function(){
    gulp.src("./src/css/*.css")  //  任意css文件
    .pipe(concat('main.min.css')) // 合并文件成  main.min.css 
    .pipe(cssminify())   // 压缩css    
    .pipe(gulp.dest('dist/css'))   //输出到dist/css文件夹下})
//   extendcss  依赖的第三方css 不做处理 只改变路劲
gulp.task("extendcss",function(){
    gulp.src("./src/extend/*.css")
    .pipe(gulp.dest('dist/css'))
   })
//   less
gulp.task("less",function(){
    gulp.src("./src/less/*.less")
    .pipe(less())  // 转less
    .pipe(concat('index.min.css'))
    .pipe(cssminify())
    .pipe(gulp.dest('dist/css'))
   })
// js
gulp.task('js', function() {  
  
gulp.src('./src/js/*.js')     // 1. 找到文件    
      .pipe(jsuglify({ mangle: false }))   // 2. 压缩文件       .pipe(concat('main.min.js')) // 3. 另存压缩后的文件 
      .pipe(gulp.dest('dist/js'))})
// image
gulp.task('image',function(){
    gulp.src('src/img/*.*')
        .pipe(imageMin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级） 
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片    
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染  
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化  
      }))      
  .pipe(gulp.dest('dist/img'))})
//  html
gulp.task("html",function(){
     var options = {
        removeComments: true,//清除HTML注释 
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />    
        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input /> 
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"  
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" 
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS    }; 
      gulp.src("./src/*.html")
     .pipe(htmlmin(options)) 
     .pipe(gulp.dest('dist'))
  })复制代码

运行

我们执行

gulp dev 复制代码

就可以在浏览器上输了localhost:8080 预览项目了，并且但我们src下的文件改动之后无需刷新页面自动更新。

淡然觉得gulp命令看的不爽的话可以修改json的指令

npm run build npm run dev 就行了

 "scripts": {   
    "dev": "gulp dev", 
    "build": "gulp build",
    "test": "echo \"Error: no test specified\" && exit 1" 
 },复制代码

写在后面

其实像这种类似的结构的项目就很简单，开发周期短，不需要webpack那种牛逼的构建工具，每个项目都有适合自己的那一套，就像现在的前端项目，无论你怎么皮，我就是vue，react一把梭，啊哈哈哈，vue也好，jq也罢，适合项目的才是最好的，老话说的好，不试试你怎么知道合不合适？（淡然，公司是不会给你时间去试试的）

啊哈哈，第一次写，溜了溜了。