配置gulpfile文件，实现文件更改后浏览器即时刷新

最新推荐文章于 2022-01-12 17:03:08 发布

骙骁

最新推荐文章于 2022-01-12 17:03:08 发布

阅读量6.4k

点赞数 1

文章标签： webpack gulp node

本文链接：https://blog.csdn.net/n602655099/article/details/51982922

版权

1.首先确保已安装过node

2.使用node init 创建package文件

3. package.js文件配置：

{
  "name": "package",
  "version": "1.0.0",
  "description": "配置package文件，实现文件更改后浏览器即时刷新",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0"
  },
  "keywords": [
    "package"
  ],
  "author": "Chris",
  "license": "ISC"
}

4.配置完成后，使用node install安装包

5.生成gulpfile.js

6.gulpfile.js配置：

var gulp = require('gulp'),
	less = require('gulp-less'),
	browserSync = require('browser-sync');

//编译less
gulp.task('less', function () {
    gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less'])
        .pipe(less())
        .pipe(gulp.dest('src/css'))
});

gulp.task('serve',['less'], function() {
    browserSync.init({
        //指定服务器启动根目录
        server: "./src"
    });
    //监听Less编译
    gulp.watch("src/less/*.less", ['less']);
    //监听任何文件变化，实时刷新页面
    gulp.watch("./src/**/*.*").on('change', browserSync.reload);
});

7.当前文件包下创建src目录，该目录下包含less包，以及html页面，运行gulp serve 进行修改