JS中使用gulp实现压缩文件及浏览器热加载功能_网络技术

JS中使用gulp实现压缩文件及浏览器热加载功能

发布时间 - 2026-01-11 02:17:51 点击率：次

gulp类似于grunt，都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

一.安装gulp

　　首先，你要安装过nodejs，如果没有安装过的同学请自行下载。先再命令行里输入 npm install gulp -g 下载gulp

二.创建gulp项目

　　创建一个你需要项目文件夹，然后在根目录输入 npm init （npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖）

三.使用npm install 安装各种依赖

　　例：

npm install browser-sync--save-dev

　　这里总共用到了这些依赖，请自行下载具体各自都有什么用后面会具体介绍。

四.编写gulpfile.js

　　首先，声明这些依赖

　　然后我们就要开始最重要的工作了，配置这些依赖

　　1.配置压缩css

　　2.配置压缩js

　　3.配置压缩img

　　4.配置html，这里没有进行压缩，感觉没有压缩的必要（纯属见仁见智）

　　5.配置清楚文件，因为每次打包都会生成新文件所以在这之前要把之前的文件给清除掉

　　6.配置浏览器热加载

　　7.配置打包

　　这里的runSequence是指能同时执行多个命令

　　8.设置gulp启动时执行哪些配置

　　最后放上全部代码供大家参考

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var minifyCSS = require('gulp-minify-css');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
var minifyHtml= require("gulp-minify-html");
gulp.task('sass', function(){  //打包sass
 return gulp.src('app/scss/**/*.scss')
  .pipe(sass()) // Converts Sass to CSS with gulp-sass
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.reload({
   stream: true
  }))
});
gulp.task('js',function() {
  gulp.src('app/**/*.js')
  .pipe(uglify())//压缩
  .pipe(gulp.dest('dist'));
});
gulp.task('css', function () {
  gulp.src('app/css/*.css')
  .pipe(minifyCSS())
  .pipe(gulp.dest('dist/css'))
})
gulp.task('minify-html',function() {
   gulp.src('app/**/*.html')//要压缩的html文件
   .pipe(gulp.dest('dist'));
});
gulp.task('images', function(){
 return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
 // Caching images that ran through imagemin
 .pipe(cache(imagemin({
   interlaced: true
  })))
 .pipe(gulp.dest('dist/images'))
});
gulp.task('clean', function(callback) {
 del('dist');
 return cache.clearAll(callback);
});
gulp.task('watch',['browserSync', 'sass'],function(){  //我们可以在watch任务之前告知Gulp，先把browserSync和Sass任务执行了再说。
 gulp.watch('app/scss/**/*.scss', ['sass']);
 gulp.watch('app/*.html', browserSync.reload);
 gulp.watch('app/js/**/*.js', browserSync.reload);
 // Other watchers
});
gulp.task('browserSync', function() { //浏览器热加载
 browserSync({
  server: {
   baseDir: 'app'
  },
 })
});
gulp.task('build', function (callback) {
 runSequence('clean',['minify-html','js','images','css'],callback)
});
gulp.task('default', function (callback) {
 runSequence(['sass','browserSync', 'watch'],
  callback
 )
});

以上所述是小编给大家介绍的JS中使用gulp实现压缩文件及浏览器热加载功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# gulp压缩文件 # js浏览器热加载 # Selenium 模拟浏览器动态加载页面的实现方法 # 让浏览器非阻塞加载javascript的几种方法小结 # 超级实用的几款浏览器插件 # 打开丰富资源大门 # 网页资源阻塞浏览器加载的原理示例解析 # 加载 # 创建一个 # 小编 # 都是 # 都有 # 多个 # 你要 # 在这 # 在此 # 请自行 # 见仁见智 # 是指 # 为你 # 最重要 # 我们可以 # 要把 # 更高 # 给大家 # 如果没有 # 相关信息

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：百度智慧农场怎么创建我的农场？百度智慧农场农田地块划分与设置

下一篇：SaaS可视化建站平台：自定义模板与SEO优化一键生成方案

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：百度智慧农场怎么创建我的农场？百度智慧农场农田地块划分与设置

下一篇：SaaS可视化建站平台：自定义模板与SEO优化一键生成方案