您的位置:首页 > 其它

gulp 搭建实时刷新环境

2016-12-05 16:42 274 查看
首先安装好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


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: