请务必理解如下章节后阅读此章节:

  1. 安装 Node 和 gulp
  2. 使用 gulp 压缩 JS

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护。

安装

npm install gulp-less

基本用法

// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-less 模块
var less = require('gulp-less') // 编译less
// 在命令行输入 gulp less 启动此任务
gulp.task('less', function () {
// 1. 找到 less 文件
gulp.src('less/**.less')
// 2. 编译为css
.pipe(less())
// 3. 另存文件
.pipe(gulp.dest('dist/css'))
}); // 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 less 任务
gulp.watch('less/**.less', ['less'])
}) // 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
gulp.task('default', ['less', 'auto'])

LESS 代码和编译后的CSS代码

less/a.less

.less{
a{
color:pink;
}
}

less/import.less

@import "a.less";
.import{
a{
color:red;
}
}

less/a.css

.less a {
color: pink;
}

less/import.css

.less a {
color: pink;
}
.import a{
color: red;
}

接着阅读:使用 gulp 编译 Sass

使用 gulp 编译 LESS的更多相关文章

  1. laravel 中 与前端的一些事2 之使用Gulp编译sass

    下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...

  2. 使用gulp编译sass

    之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...

  3. Visual Studio 2017中使用gulp编译sass/scss

    在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...

  4. gulp编译sass

    前言:前段时间学习了sass语法,但是一直用的是"考拉"这个软件工具将我写的sass代码编译成css,然后再引用到项目里面去的,随着对sass的更加深入的了解,我开始尝试着将sas ...

  5. gulp编译less简单demo

    写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...

  6. gulp 编译es6 探究

    1.gulp配置: var gulp = require('gulp') var fs = require("fs") var babelify = require('babeli ...

  7. gulp 编译es6 react 教程 案例 配置

    1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel') ...

  8. 使用 gulp 编译 Sass

    无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...

  9. 玩转gulp之gulp编译less

    用好gulp grunt webpack让前端编程走向自动化,是作为一个前端开发必须学会的技能,不然逼格怎么提升的上去呢... 然后教大家如何用gulp装逼.一点点的学,都是相通的嘛 1. 安装nod ...

随机推荐

  1. HTML精确定位之位置参数乱炖一锅

    一.前言 公司项目,需要在一个图片的右上角放置一个类似“X”的东西(其实是需要显示一个数字,就像微信一样,在右上角显示几个消息),然后需要用到html的定位,看了几个网上的例子,恍惚间看到了一个off ...

  2. 【Python】PYTHON九九乘法表

    python2.7 for i in range(1,10):  for j in range(1,i+1):    print j,'x',i,'=',j*i,'\t',  print '\n'pr ...

  3. HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)

    前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...

  4. ashx文件和aspx

    ashx文件和aspx文件有什么不同? 我们先新建一个ashx文件看看: <%@ WebHandler Language="C#" Class="Handler&q ...

  5. 01、BUCK电路的参数计算

    案例:设计一个Buck电路,满足如下性能指标要求:一.性能指标要求  1.输入电压  2.输出电压  3.输出电压纹波  4.电流纹波  5.开关频率  二.需要计算的参数  三.BUCK电路拓扑   ...

  6. poj 2104 (划分树模板)

    Description You are working for Macrohard company in data structures department. After failing your ...

  7. codeforces 1077D

    题目:https://codeforces.com/contest/1077/problem/D 题意:给你一个长度为n的串,你需要在里面找到出现次数最多的长度为k的子序列(子序列中元素可重复),求这 ...

  8. 使用 FirewallD 构建动态防火墙

    使用 FirewallD 构建动态防火墙 FirewallD 提供了支持网络/防火墙区域(zone)定义网络链接以及接口安全等级的动态防火墙管理工具.它支持 IPv4, IPv6 防火墙设置以及以太网 ...

  9. 测试数据库DG搭建为正式库以后做准备

    Data guard 部署 1.系统准备(备库只需建立数据库软件) 两台操作系统 oracle linux 7 Node1 172.16.70.191 Node2 172.16.70.192 Orac ...

  10. 使用T4模板生成MySql数据库实体类

    注:本文系作者原创,但可随意转载. 现在呆的公司使用的数据库几乎都是MySQL.编程方式DatabaseFirst.即先写数据库设计,表设计按照规范好的文档写进EXCEL里,然后用公司的宏,生成建表脚 ...