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

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. sql 语句 插入数据 返回值问题

    1. 主键ID 自增 ,插入数据后返回这条数据的ID值 insert into tableName() values() select @@identity 2.主键ID 使用GUID类型值 ,插入数 ...

  2. git如何删除本地所有未提交的更改

    stash很好用,至少不会影响 .gitignore 里面的不跟踪的文件: git add . && git stash && git stash drop ===== ...

  3. Java并发多线程 - 并发工具类JUC

    安全共享对象策略 1.线程限制 : 一个被线程限制的对象,由线程独占,并且只能被占有它的线程修改 2.共享只读 : 一个共享只读的对象,在没有额外同步的情况下,可以被多个线程并发访问, 但是任何线程都 ...

  4. 【模版】多项式乘法 FFT

    https://www.luogu.org/problem/show?pid=3803 题目背景 这是一道模版题 题目描述 给定一个n次多项式F(x),和一个m次多项式G(x). 请求出F(x)和G( ...

  5. POJ 2823 Sliding Window ST RMQ

    Description An array of size n ≤ 106 is given to you. There is a sliding window of size k which is m ...

  6. 希尔排序Shell sort

    希尔排序Shell Sort是基于插入排序的一种改进,同样分成两部分, 第一部分,希尔排序介绍 第二部分,如何选取关键字,选取关键字是希尔排序的关键 第一块希尔排序介绍 准备待排数组[6 2 4 1 ...

  7. MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

    源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...

  8. windows下 nginx安装 使用

    介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器. 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络 ...

  9. Python ctypes的byref和pointer有啥区别

    byref(n)返回的相当于C的指针右值&n,本身没有被分配空间: >>> from ctypes import *>>> n = c_int(0)> ...

  10. static class 和 non static class 的区别

    static class non static class 1.用static修饰的是内部类,此时这个 内部类变为静态内部类:对测试有用: 2.内部静态类不需要有指向外部类的引用: 3.静态类只能访问 ...