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

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. Connections between cities LCA

    Problem Description After World War X, a lot of cities have been seriously damaged, and we need to r ...

  2. 题解【luoguP4145 上帝造题的七分钟2(花神游历各国)】

    题目链接 题解 题目大意: 一个序列,支持区间开方与求和操作. 算法:线段树实现开方修改与区间求和 分析: 显然,这道题的求和操作可以用线段树来维护 但是如何来实现区间开方呢 大家有没有这样的经历:玩 ...

  3. [技巧篇]01.Servlet的优化模版代码

    Servlet.java的模版 #---------------------------------------------# # <aw:description>Template for ...

  4. CSS实现三列布局方法总结

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

  5. [洛谷P1822] 魔法指纹

    洛谷题目连接:魔法指纹 题目描述 对于任意一个至少两位的正整数n,按如下方式定义magic(n):将n按十进制顺序写下来,依次对相邻两个数写下差的绝对值.这样,得到了一个新数,去掉前导0,则定义为ma ...

  6. Strand Sort

    Strand sort是思路是这样的,它首先需要一个空的数组用来存放最终的输出结果,给它取个名字叫"有序数组" 然后每次遍历待排数组,得到一个"子有序数组",然 ...

  7. c# 事实证明,abstract类除了不能用new实例化和类没什么区别

    abstract类是抽象类,不能够实例化,大家都知道,abstract类往往和接口interface一块儿使用,针对接口中一些公共的方法进行实现,然后实体类去继承抽象类和接口.虽然abstract类不 ...

  8. 【poj2182】【poj2828】树状数组/线段树经典模型:逆序查找-空位插入法

    poj2182题意:有一个1~n的排列,现在给定每个人前面有多少个人的编号比他大,求这个排列是什么.n<=8000 poj2182题解: 逆序做,可以确定二分最后一个是什么,然后删除这个数.树状 ...

  9. oracle scott用户不存在

    scott用户拥有一些基础的数据表,可以供我们练习sql.先执行 alter user scott account unlock; 查看scott用户是否存在 当scott用户不存在,我们就需要在$O ...

  10. 20151024_003_C#基础知识(File / FileStream / StreamReader/StreamWriter)

    1:绝对路径和相对路径 绝对路径:通过给定的路径直接能在我的电脑中找到这个文件. 相对路径:文件相对于应用程序的路径. 2:编码格式 乱码:产生乱码的原因,就是你保存这个文件所采用的编码,跟你打开这个 ...