/gulp-auto-refresh

前端开发使用的自动刷新页面脚手架，自动合并js和css文件

Primary LanguageJavaScript

简介

  • 前端开发的脚手架，启动服务后，修改文件后自动重载。
  • 使用gulp相关的技术。

使用

初始化安装依赖文件

npm install

启动动态监控服务

gulp serve

  • public文件夹里的scss和js文件修改后，会自动编译到dist文件夹里，包括压缩前和压缩后两份文件。
  • dist中文件的修改，都会触发自动重载页面。

一次性执行

gulp default

实时监控变化

gulp watch

npm start启动服务

  • 页面中使用了ajax的load等功能在gulp serve启动的服务中，不能正常运行；
  • 这时就需要用node启动服务来运行，然后启动gulp watch进行监控。

操作方法：

  • npm start 启动http://localhost:9000/index.html服务

  • gulp watch 监控文件变化，自动压缩修改的文件，但是页面不会刷新，需要手动刷新

技术点

gulp

  • gulp-rename 重命名
  • gulp-sass 解析css文件
  • gulp-uglif 压缩js文件
  • gulp-watch 非必需，在不使用下面的watch功能的时候，直接使用watch监听文件修改；
  • gulp-concat 合并多个文件为一个文件
  • gulp-clean-css 压缩css文件
  • express 启动node服务器

启动自动重载服务

browser-sync 自带watch功能