使用 gulp 编译 LESS
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 编译 LESS的更多相关文章
- laravel 中 与前端的一些事2 之使用Gulp编译sass
下载所有依赖npm的packagist: 下载了前端laravel elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...
- 使用gulp编译sass
之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...
- Visual Studio 2017中使用gulp编译sass/scss
在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...
- gulp编译sass
前言:前段时间学习了sass语法,但是一直用的是"考拉"这个软件工具将我写的sass代码编译成css,然后再引用到项目里面去的,随着对sass的更加深入的了解,我开始尝试着将sas ...
- gulp编译less简单demo
写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
- gulp 编译es6 探究
1.gulp配置: var gulp = require('gulp') var fs = require("fs") var babelify = require('babeli ...
- gulp 编译es6 react 教程 案例 配置
1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel') ...
- 使用 gulp 编译 Sass
无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...
- 玩转gulp之gulp编译less
用好gulp grunt webpack让前端编程走向自动化,是作为一个前端开发必须学会的技能,不然逼格怎么提升的上去呢... 然后教大家如何用gulp装逼.一点点的学,都是相通的嘛 1. 安装nod ...
随机推荐
- HTML精确定位之位置参数乱炖一锅
一.前言 公司项目,需要在一个图片的右上角放置一个类似“X”的东西(其实是需要显示一个数字,就像微信一样,在右上角显示几个消息),然后需要用到html的定位,看了几个网上的例子,恍惚间看到了一个off ...
- 【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 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)
前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...
- ashx文件和aspx
ashx文件和aspx文件有什么不同? 我们先新建一个ashx文件看看: <%@ WebHandler Language="C#" Class="Handler&q ...
- 01、BUCK电路的参数计算
案例:设计一个Buck电路,满足如下性能指标要求:一.性能指标要求 1.输入电压 2.输出电压 3.输出电压纹波 4.电流纹波 5.开关频率 二.需要计算的参数 三.BUCK电路拓扑 ...
- poj 2104 (划分树模板)
Description You are working for Macrohard company in data structures department. After failing your ...
- codeforces 1077D
题目:https://codeforces.com/contest/1077/problem/D 题意:给你一个长度为n的串,你需要在里面找到出现次数最多的长度为k的子序列(子序列中元素可重复),求这 ...
- 使用 FirewallD 构建动态防火墙
使用 FirewallD 构建动态防火墙 FirewallD 提供了支持网络/防火墙区域(zone)定义网络链接以及接口安全等级的动态防火墙管理工具.它支持 IPv4, IPv6 防火墙设置以及以太网 ...
- 测试数据库DG搭建为正式库以后做准备
Data guard 部署 1.系统准备(备库只需建立数据库软件) 两台操作系统 oracle linux 7 Node1 172.16.70.191 Node2 172.16.70.192 Orac ...
- 使用T4模板生成MySql数据库实体类
注:本文系作者原创,但可随意转载. 现在呆的公司使用的数据库几乎都是MySQL.编程方式DatabaseFirst.即先写数据库设计,表设计按照规范好的文档写进EXCEL里,然后用公司的宏,生成建表脚 ...