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

  

原文地址:https://www.cnblogs.com/suxiaolong/p/6134479.html