gulp之压缩css,less转css,浏览器实时刷新【原创】
首先要下载对应的插件包;
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,浏览器实时刷新【原创】的更多相关文章
- webpack-dev-server 搭建本地服务以及浏览器实时刷新
一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)
gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
- Gulp解决发布线上文件(CSS和JS)缓存问题
Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...
- 第十一节:Bundles压缩合并js和css及原理分析
一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...
- css属性兼容主流浏览器
目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着 ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- 转:利用node压缩、合并js,css,图片
1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...
随机推荐
- springboot集成thymeleaf中遇到的问题
错误:不能返回页面,只返回字符串. 原因:在controller中使用了注解@RestController 修改:修改注解为@Controller @Controller 分析: RestContro ...
- 单例 ------ JAVA实现
单例:只能实例化一个对象,使用场景比如打印机. 最推荐的是采用饿汉式:双重校验锁用到了大量的语法,不能保证这些语法在所用场合一定没问题,所以不是很推荐:总之简单的才是最好的,就饿汉式!!! C++ 创 ...
- Qt ------- QByteArray操作注意
使用QByteArray方法把数据存入QByteArray需要是char型数据,如果需要存入无符号8位数据,如下: QByteArray data; data[0] = 0xFF; 即使通过data[ ...
- javascript如何判断对象为空
1.自定义jQuery的isEmptyObject()方法. function isEmptyObject(e) { var t; for (t in e) return !1; return !0 ...
- 九度OJ 1535 重叠的最长子串
重叠的最长子串 http://ac.jobdu.com/problem.php?pid=1535 时间限制:1 秒 内存限制:128 兆 题目描述: 给定两个字符串,求它们前后重叠的最长子串的长度,比 ...
- [洛谷P2852] [USACO06DEC]牛奶模式Milk Patterns
洛谷题目链接:[USACO06DEC]牛奶模式Milk Patterns 题目描述 Farmer John has noticed that the quality of milk given by ...
- 【NOIP】提高组2013 火柴排队
[题意]两列n个火柴,分别有高度ai和bi(同一列高度互不相同),每次可以交换一列中的两个相邻火柴,定义距离为∑(ai-bi)^2,求使距离最小的最少交换次数,n<=10^5. [算法]逆序对 ...
- SQL语句中的单引号处理以及模糊查询
为了防止程序SQL语句错误以及SQL注入,单引号必须经过处理.有2种办法: 1.使用参数,比如SELECT * FROM yourTable WHERE name = @name; 在C#中使用Sql ...
- cnn 卷积神经网络 人脸识别
卷积网络博大精深,不同的网络模型,跑出来的结果是不一样,在不知道使用什么网络的情况下跑自己的数据集时,我建议最好去参考基于cnn的手写数字识别网络构建,在其基础上进行改进,对于一般测试数据集有很大的帮 ...
- js_在原有的日期上添加天数输出添加后的日期
开始编码工作也有段时间了,想想没有留下点什么,有点遗憾.学到的一些经验,写写,分享一下.也给自己整理一下. 今天分享一下,在原有的日期上添加天数输出添加后的日期.开始做的时候,简单的思路是,直接用ne ...