gulp-livereload热更新

最新推荐文章于 2022-01-19 15:55:58 发布

墨霁青玉

最新推荐文章于 2022-01-19 15:55:58 发布

阅读量1.2k

点赞数

分类专栏： gulp 文章标签： gulp liverload

本文链接：https://blog.csdn.net/qq_30604453/article/details/84764712

版权

gulp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 新建一个项目文件夹。

npm init --yes
npm install express 
npm install --save-dev gulp gulp-liverload gulp-replace

2. 项目根目录下新建app.js

const path = require('path')
const express = require('express')
const app = new express();
const port = 3000;

app.use(express.static('public'));
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(port, (error) => {
  if (error) {
    console.error(error);
  } else {
    console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port);
  }
});

3. 项目根目录下新建 views/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>标题</title>
    <link rel="stylesheet" href="./css/index.css">
  </head>
  <body>
    <p class="red">测试2333</p>
  </body>
</html>

4.项目根目录下新建 public/css/index.css

.red{
  color: blue;
}

5.为package.json的scripts添加命令start

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },

6.前面都是铺垫，重头戏来了。项目根目录下新建gulpfile.js

watch任务可以监测文件变动，达到热更新效果

dist任务打包文件

const gulp = require('gulp')
const livereload = require('gulp-livereload')
const exec = require('child_process').exec
const replace = require('gulp-replace')

gulp.task('watch',function(){
  livereload.listen();
  gulp.watch('views/*.html',function(file){
    livereload.changed(file.path)
  })
  gulp.watch('public/**/*.*',function(file){
      livereload.changed(file.path);
  });
})
gulp.task('start', function() {
  exec('npm start')
})
gulp.task('dist', function() {
  gulp.src('./views/*.html')
    .pipe(replace('src="js', 'src="./js'))
    .pipe(gulp.dest('./dist'))

  gulp.src('./public/js/*.js')
    .pipe(gulp.dest('./dist/js'))

  gulp.src('./public/css/*.css')
    .pipe(gulp.dest('./dist/css'))

  gulp.src('./public/img/*.+(jpeg|jpg|png|gif)')
    .pipe(gulp.dest('./dist/img'))

  gulp.src('./public/media/*.+(mp4|webm)')
    .pipe(gulp.dest('./dist/media'))
})
gulp.task('default', ['start', 'watch'])

7.做到这一步，就差最后一步，为chrome安装扩展程序liverload

下载链接：https://download.csdn.net/download/qq_30604453/10824629

下载解压后直接将LiveReload_v2.1.0.crx拖入chrome扩展程序面板即可。

所有铺垫都做完了。启动项目，开启git bash窗口，运行gulp

在浏览器中打开localhost:3000，并点击liverload使其中心圆圈变成实心。就实现了简易的热更新效果。在IDE中修改代码ctrl+s后，浏览器自动刷新代码。