第一次使用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文件的更多相关文章

  1. 如何将less编译成css文件__less自动编译成css的方法总结

    作为css的预处理less,拥有着比css更快捷方便,扩展了css的变量.Mixin.函数等特性,使 CSS 更易维护和扩展.  如何你已经回使用css,那么less就很容易上手了.如果不使用less ...

  2. C#.NET常见问题(FAQ)-如何将cs文件编译成dll文件 exe文件 如何调用dll文件

    比如我要把TestDLL.cs文件编译成dll文件,则在命令提示符下,输入下面的命令,生成的文件为TestDLL.dll csc /target:library TestDLL.cs 注意前提是你安装 ...

  3. C#.NET如何将cs文件编译成dll文件 exe文件 如何调用dll文件

    比如我要把TestDLL.cs文件编译成dll文件,则在命令提示符下,输入下面的命令,生成的文件为TestDLL.dll csc /target:library TestDLL.cs 注意前提是你安装 ...

  4. 在JAVA中将class文件编译成jar文件包，运行提示没有主清单属性

    在JAVA中将class文件编译成jar文件包,运行提示没有主清单属性 Maven 项目生成jar运行时提示“没有主清单属性” 新建了一个Maven的项目,mvn compile和mvn packag ...

  5. 将java文件编译成class文件

    一般情况下,在myeclipse中保存java文件后会自动编译成class文件,但是这种情况只能编译当前工程的java文件,但是如果需要编译不是一个工程的java文件,比如在网上拷贝的java文件改如 ...

  6. gulp-less插件之less文件编译成css

    gulp 是基于node的,所以第一步要确保你已经安装了node环境,具体怎么安装可以到node官网去看一下(https://nodejs.org/en/) 1.全局按钮gulp 打开node窗口输入 ...

  7. Sublime text 3如何编辑less并转(编译)成css文件

    今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个 ...

  8. 关于Sublime text 3如何编辑less并转(编译)成css文件

    今天开始学习使用less这个强大方便的前端工具,本来是考虑用koala(专门编辑less的软件)来使用less的,但是发现sublime编辑器也可以实现对less的编译及高亮显示代码,这样既能少用一个 ...

  9. 如何把.cs文件编译成DLL文件

    开始--程序--Microsoft Visual Studio.NET 2013--Visual Studio.NET工具,点击其中的"VS2013 开发人员命令提示",就会进入M ...

随机推荐

  1. DropDownList 不能绑定多个值错误！

    ListItem item = new ListItem("--请选择--",""); ddlstPurchaser.Items.Insert(0, item) ...

  2. myeclipse 上安装 Maven

    myeclipse 上安装 Maven3   环境准备: JDK 1.6 Maven 3.0.4 myeclipse 8.6.1 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Mav ...

  3. 非局部均值去噪（NL-means）

    非局部均值(NL-means)是近年来提出的一项新型的去噪技术.该方法充分利用了图像中的冗余信息,在去噪的同时能最大程度地保持图像的细节特征.基本思想是:当前像素的估计值由图像中与它具有相似邻域结构的 ...

  4. 转 xshell 图像化展示

    http://www.cnblogs.com/kellyseeme/p/7965830.html 限制: 无法显示通过堡垒机登录的机器的图形接界面. 只能显示直接登录的服务到期的图像化界面 Xshel ...

  5. 配置了SSH后还是每次都要求输入密码

    保存凭证可以解决问题 git config --global credential.helper store

  6. vbox安装64位ubuntu

    如果不做任何设置的话,你会发现下载下来的vbox只能安装32位的系统,如果想要安装64位的系统,我们需要做一些配置: 进入bios(basic input output system), Securi ...

  7. 深刻理解Linux进程间通信（IPC）

    https://www.ibm.com/developerworks/cn/linux/l-ipc/ linux下进程间通信的几种主要手段简介: 管道(Pipe)及有名管道(named pipe):管 ...

  8. Timer控制开始、停止例子【转】

    public partial class Form1 : Form    {       static public bool flag;         public Form1()        ...

  9. C#数字图像处理算法学习笔记（一）--C#图像处理的3中方法

    C#数字图像处理算法学习笔记(一)--C#图像处理的3中方法 Bitmap类:此类封装了GDI+中的一个位图,次位图有图形图像及其属性的像素数据组成.因此此类是用于处理像素数据定义的图形的对象.该类的 ...

  10. JSPt的Base标签

    <base href="${pageContext.request.contextPath}/"/> 注意:base标签得到的内容是: /projectName/ 这种 ...