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/‘))
});

  

时间: 2024-10-08 12:58:28

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

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

一.概述 开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后台开发人员进行帮忙,有的时候后台开发人员还爱答不理的.为了解决这个爱答不理的问题,webpack-dev-server出现了,它的出现告诉后台开发人员,不用你们了. webpack-dev-server的作用不只是搭建本地服务器,大家知道使用webpack可以 进行监听和打包文件,但是如果文件比较

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

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

关于gulp的压缩js和css

npm install --global gulp npm install gulp --save-dev 在项目根目录下创建一个名为 gulpfile.js 的文件 var gulp = require('gulp'); gulp.task('default', function() {  // 将你的默认的任务代码放在这}); npm install  gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-c

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

一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是MVC中特有的一种优化方式. (当然现在前端也有很多基于node的工作流插件,可以合并压缩混淆js或css) 2. 原理(了解即可):核心方法ApplyTransforms,通过StreamReader不断一次一次进行读取 参考文档:https://docs.microsoft.com/en-us/a

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

grunt 压缩多个js,css文件

付测试例子链接:http://pan.baidu.com/s/1jGk2TEm 步骤:首先需要再与Gruntfile.js同一层创建文件夹dist,然后执行$npm install ,最后执行grunt. 看了两天的grunt各种资料,终于在今天打包成功了,我看了网上的很多资料,在打包的时候都出现很多问题,原因是我的js与css路径问题,现在做一个简单的测试例子. 首先目录结构 package.json { "name": "pro", "version&

【CSS】怎么解决浏览器兼容性问题

[CSS]怎么解决浏览器兼容性问题 工具/原料 Dreamweaver CSS 方法/步骤 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padding:0px;} 借于此,所有标记的内外边距被统一起来. 优先级问题: 对于同一标记属性所给定的值,有不同的优先级.其中优先级最高的是内联代码,其实是页内CSS,接下来是浏览器默认设置,最后才是外部CSS所做的限制. Margin不一致的问题

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

[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则.实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks.Attribute Hacks).对此根据一些资料汇总了一些CSS Hacks方法.   1.条件样式表 像这样的代码你应该见过: <link rel="stylesheet