gulp 搭建实时刷新环境

首先安装好node,npm，gulp
检查
  node -v  
  npm -v
npm i gulp -g --registry=http://registry.npm.taobao.org    //安装gulp插件
npm install gulp-plumber --save       //安装gulp-plumber插件
npm install --save-dev gulp-connect   //安装gulp-connect插件
再在dos里面，随便进入一个文件夹里面，执行
npm  init   //新建项目
npm i --save-dev gulp gulp-less    //“--save”表示把两个引入的包存入package.json文件中

接着新建 gulpfile.js 内容为：
var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');

var paths = {
	less: ['./less/*.less']
};
gulp.task('less', function () {
	return gulp.src(paths.less)
	.pipe(plumber())
	.pipe(less())
	.pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
	gulp.watch(paths.less, ['less']);
});



gulp  less   //开启监控
gulp watch  //开启监控

------------------------------

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
const connect = require('gulp-connect');

var paths = {
    less: ['./less/*.less']
};
gulp.task('less', function () {
    return gulp.src(paths.less)
    .pipe(plumber())
    .pipe(less())
    .pipe(gulp.dest('./css'))
    .pipe(connect.reload());
});
gulp.task('connect', function() {
    connect.server({
        root: './',
        livereload: true
    });
});
gulp.task('watch', function() {
    gulp.watch(paths.less, ['less']);
});
gulp.task('default', ['less', 'connect', 'watch']);

这种dos中输入gulp就可以开启监控

 

先建xx.less在开启监控

参考网站 https://zhuanlan.zhihu.com/p/20903085