首先要下载对应的插件包;

gulp-less包:cnpm install gulp-less --save-dev

gulp-connect包:cnpm install gulp-connect--save-dev

gulp-minify-css包:cnpm install gulp-minify-css --save-dev

var gulp=require('gulp'),
gulp_less=require('gulp-less'),
gulp_connect=require('gulp-connect'),
gulp_minify_css=require('gulp-minify-css'); //在一个任务中【执行多个任务】
gulp.task('serves',function () {
//创建一个服务器,端口默认是8080
gulp_connect.server({
//root:根目录
root:'web',
livereload:true
});
//动态监听
gulp.watch('web/**/*.*',['reload','less']);
});
//部署动作命令-reload
gulp.task('reload',function () {
gulp.src('web/**/*.*')
.pipe(gulp_connect.reload());
});
//部署动作-less
gulp.task('less',function () {
gulp.src('web/less/*.less')
.pipe(gulp_less())
.pipe(gulp_minify_css())
.pipe(gulp.dest('web/css/'))
});

  

gulp之压缩css,less转css,浏览器实时刷新【原创】的更多相关文章

  1. webpack-dev-server 搭建本地服务以及浏览器实时刷新

    一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...

  2. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  3. gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

    gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...

  4. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  5. Gulp解决发布线上文件(CSS和JS)缓存问题

    Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...

  6. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  7. css属性兼容主流浏览器

    目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着 ...

  8. 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  9. 转:利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

随机推荐

  1. ZooKeeper食谱(八)

    使用ZooKeeper构造高级别应用的指南 在这个文章中,你将会发现使用ZooKeeper来实现高级别功能的指南.所有的它们在客户端上被实现而不需要ZooKeeper特别的支持.希望社区将注意到这些约 ...

  2. 「模板」 FHQ_Treap

    「模板」 FHQ_Treap 我也是偶然发现我还没发过FHQ_Treap的板子. 那就发一波吧. 这个速度实在不算快,但是不用旋转,并且好写. 更重要的是,Splay 可以做的事情它都可以做!比如区间 ...

  3. 单词转换成向量形式 word2vec

    word2vec(word to vector)是一个将单词转换成向量形式的工具.可以把对文本内容的处理简化为向量空间中的向量运算,计算出向量空间上的相似度,来表示文本语义上的相 似度.word2ve ...

  4. UITableViewController的使用

    如果整个程序界面都只是使用UITableView来搭建,一般需要如下步骤: (1)向界面上拖一个UITableView (2)设置数据源 (3)设置代理 (4)遵守代理协议  上述过程相对繁琐,为了简 ...

  5. python读文件和写入文件复习

    with open("name.txt",'r') as read_file: for name in read_file: list_name = (name.split(',' ...

  6. Linux常用命令汇总(持续更新中)

    命令 说明 注意点 cat access.log | wc -l 统计行数 awk命令可以做到同样的想过:cat access.log | awk 'END {print NR}' grep vnc  ...

  7. Frogs' Neighborhood(POJ1659+Havel-Hakimi定理)

    题目链接:http://poj.org/problem?id=1659 题目: 题意:根据他给你的每个点的度数构造一张无向图. 思路:自己WA了几发(好菜啊……)后看到discuss才知道这个要用Ha ...

  8. 解决java在对MySQL插入数据时出现乱码问题

    1.在连接数据库的时候请注意, 最使用连接连接数据库的时候,必须在后面追加上编码的设置:useUnicode=true&characterEncoding=UTF-8,如下图所示. 参考连接: ...

  9. vue-awesome-swipe 基于vue使用的轮播组件 使用(改)

    npm install vue-awesome-swiper --save  //基于vue使用的轮播组件 <template> <swiper :options="swi ...

  10. [NOIP2011]刷水

    前几天做了NOIP2011的题,感觉不是那么难. 这边先做了两天的前两题,T3还没打. D1T1:顺次读入,分别判断是否覆盖即可,照例大水: #include<cstdio> ],b[], ...