用gulp把less文件编译成css文件
第一次使用gulp构建工具，使用gulp将.less文件编译成.css文件并输出。根据视频做了笔记。提供新手和自己以后做参考。
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<title>less</title>
</head>
<body>
<div class="box">
<span>我是内容</span>
</div>
</body>
</html>
styles.less文件
@base:pink;
body{
background-color: @base;
}
.border-top{
border-top: 2px solid #000;
}
.box{
width: 200px;
height: 200px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
.border-top;
}
创建package.json文件
$ npm init
安装插件 gulp 和gulp-less
$ npm install gulp gulp-less --save-dev
注：先在全局安装gulp，安装过的忽略此步骤。否则先全局安装。mac用户建议在npm前加上sudo，避免安装不上的情况
$ npm install gulp -g
新建配置文件gulpfile.js，放在根目录
// 导入插件
var less = require('gulp-less');
var path = require('path');
var gulp = require('gulp');
// 配置打包信息
gulp.task('less',function(){
// 找到less文件
return gulp.src('./styles.less')
// 用gulp-less做处理
.pipe(less({
paths:[path.join(__dirname,'less','includes')]
}))
// 输出到当前目录下
.pipe(gulp.dest('./'))
})
// 定义默认任务
gulp.task('default',['less'])
然后再控制台中输入gulp命令
$ gulp
执行完毕截图
最终生成的styles.css为：
body {
background-color: pink;
}
.border-top {
border-top: 2px solid #000;
}
.box {
width: 200px;
height: 200px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid #000;
}
用gulp把less文件编译成css文件的更多相关文章
- 如何将less编译成css文件__less自动编译成css的方法总结
作为css的预处理less,拥有着比css更快捷方便,扩展了css的变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 如何你已经回使用css,那么less就很容易上手了.如果不使用less ...
- C#.NET常见问题(FAQ)-如何将cs文件编译成dll文件 exe文件 如何调用dll文件
比如我要把TestDLL.cs文件编译成dll文件,则在命令提示符下,输入下面的命令,生成的文件为TestDLL.dll csc /target:library TestDLL.cs 注意前提是你安装 ...
- C#.NET如何将cs文件编译成dll文件 exe文件 如何调用dll文件
比如我要把TestDLL.cs文件编译成dll文件,则在命令提示符下,输入下面的命令,生成的文件为TestDLL.dll csc /target:library TestDLL.cs 注意前提是你安装 ...
- 在JAVA中将class文件编译成jar文件包，运行提示没有主清单属性
在JAVA中将class文件编译成jar文件包,运行提示没有主清单属性 Maven 项目生成jar运行时提示“没有主清单属性” 新建了一个Maven的项目,mvn compile和mvn packag ...
- 将java文件编译成class文件
一般情况下,在myeclipse中保存java文件后会自动编译成class文件,但是这种情况只能编译当前工程的java文件,但是如果需要编译不是一个工程的java文件,比如在网上拷贝的java文件改如 ...
- gulp-less插件之less文件编译成css
gulp 是基于node的,所以第一步要确保你已经安装了node环境,具体怎么安装可以到node官网去看一下(https://nodejs.org/en/) 1.全局按钮gulp 打开node窗口输入 ...
- Sublime text 3如何编辑less并转(编译)成css文件
今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个 ...
- 关于Sublime text 3如何编辑less并转(编译)成css文件
今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个 ...
- 如何把.cs文件编译成DLL文件
开始--程序--Microsoft Visual Studio.NET 2013--Visual Studio.NET工具,点击其中的"VS2013 开发人员命令提示",就会进入M ...
随机推荐
- 备份与恢复：MySQL系列之十二
一.备份策略赘述 1.备份的类型 类型1: 热备份:读写不受影响(MyISAM不支持热备,InnoDB支持热备) 温备份:仅可以执行读操作 冷备份:离线备份,读写操作均中止 类型2: 物理备份:复制数 ...
- 关系型数据库基础概念：MySQL系列之开篇
一.基础概念 数据(Data)是描述事物的符号记录,是指利用物理符号记录下来的.可以鉴别的信息. 1.数据库(Database,DB)是指长期储存在计算机中的有组织的.可共享的数据集合.数据要按照一定 ...
- tput 命令行使用说明
转载自:https://blog.csdn.net/fdipzone/article/details/9993961 什么是 tput?tput 命令将通过 terminfo 数据库对您的终端会话进行 ...
- python大战机器学习——模型评估、选择与验证
1.损失函数和风险函数 (1)损失函数:常见的有 0-1损失函数 绝对损失函数 平方损失函数 对数损失函数 (2)风险函数:损失函数的期望 经验风险:模型在数据集T上的平均损失 根据大 ...
- HDU 4622 Reincarnation Hash解法详解
今天想学字符串hash是怎么弄的.就看到了这题模板题 http://acm.hdu.edu.cn/showproblem.php?pid=4622 刚开始当然不懂啦,然后就上网搜解法.很多都是什么后缀 ...
- GraphQL实战经验和性能问题的解决方案
在现在的公司使用GraphQL有一段时间了. 现公司从创立之后的很长一段时间内是纯PHP的技术栈,前端.后端都在PHP代码中糅合在一起.新功能越加越多,页面越来越复杂之后,那些混在在PHP代码中的HT ...
- phpize使用方法
phpize是用来扩展php扩展模块的,通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下 安装(fastcgi模式)的时候,常常有这样一句命令: 代码如下: / ...
- 打印流-PrintStream
打印流-PrintStream java.io.PrintStream为其他输出流添加了功能,使其他的流能够更方便的打印各种数据值表现形式 PrintStream特点: 1.只负责数据的输入,不负责数 ...
- electron 集成 nedb / sqlite3
nedb nedb 无法创建文件 // webpack 构建的前提 externals: process.env.web ? {} : { "nedb": "requir ...
- 如何在数据库中导入excel文件内的数据
如何在数据库中轻松导入excel格式的文件 1)打开sql server,找到要导入数据的数据库,右键>>任务>>导入数据 2)按照图示选择要导入的excel 3)选择导入到哪 ...