第一次使用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. nginx大量TIME_WAIT的解决办法

    1.netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 查看time_wait 很大 2.解决此问题需要对sysc ...

  2. js 中的 for 循环。。。

    for (var i in data){ data[i] } 和for (var i=0;i< data.length; i++){ data[i] } 第一种可能会有bug...

  3. 安装mongodb并配置

    下载网址http://dl.mongodb.org/dl/win32/x86_64 mongodb-win32-x86_64-2008plus-ssl-v3.4-latest.zip 解压d盘命名mo ...

  4. new与malloc区别

    1.new分配内存时会按照数据类型计算需要分配内存的大小,malloc分配内存时是按照指定的大小分配的:2.new不仅分配一段内存,而且会调用构造函数,malloc不会调用构造函数:之前看到过一个题说 ...

  5. Java面向对象_数据结构之链表

    链表:是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里村到下一个节点的指针. 在链表数据结构中,需要使用到递归算法.递归算法是一种直接或间接地调用自身算法的过 ...

  6. 【Linux】Linux常用命令大全

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  7. java CyclicBarrier同步屏障

    CyclicBarrier的字面意思是可循环使用的屏障,它的主要作用是,让一组线程到达一个屏障时被阻塞,知道最后一个线程到达屏障时,屏障才会打开,所有被屏障拦截的线程才会继续运行. 1.简介: Cyc ...

  8. css中 repeat-x 的简单用法

    问repeat-x 00 中: 0 0 是 什么意思,如果改为0 -50呢,不写话默认是什么(不写话和0 0  的效果不一样)- ------<html><head><s ...

  9. Oracle 搭建Node.js开发环境

      先决条件 安装oralce客户端驱动. 安装node.js.   创建项目 安装oracledb模块 $npm install oracledb 如果失败了,你可能要爬墙.   参考package ...

  10. java获得文件扩展名

    java获得文件扩展名: public static void main(String[] args) throws Exception { String name = ""; S ...