gulp 是基于node的,所以第一步要确保你已经安装了node环境,具体怎么安装可以到node官网去看一下(https://nodejs.org/en/

1.全局按钮gulp

打开node窗口输入npm install -g gulp

全局安装好之后  进入当前目录安装本地安装

npm install --save-dev gulp

当全局与本地项目文件夹里面都安装好了之间 使用命令行 gulp –v看一下版本

如果版本一样那就最好了


2.插件安装

npm install gulp-less --save-dev

npm install --save-dev gulp-less

npm install --save-dev gulp-watch

安装好插件之后我们在目录里面就会看到文件

3.Gulpfile.js任务配置

var gulp = require('gulp'),
less = require('gulp-less'),
watch = require('gulp-watch'); //编译我们的less
gulp.task('testLess', function () {
gulp.src('less/bootstrap.less')
.pipe(less())
.pipe(gulp.dest('css/'));//输出文件夹--主要这里的路径
}); gulp.task('testWatch', function () {
gulp.watch('less/*.less', ['testLess']); //当所有less文件发生改变时,调用testLess任务
});

  

配置出来之后

执行gulp testWatch任务进行less监测,当less文件修改了之后对应的css文件就会跟着改变

gulp-less插件之less文件编译成css的更多相关文章

  1. 用gulp把less文件编译成css文件

    第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出.根据视频做了笔记.提供新手和自己以后做参考. HTML文件 <!DOCTYPE html> <htm ...

  2. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

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

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

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

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

  5. Linux内核驱动将多个C文件编译成一个ko文件的方法——每一个C文件中都有module_init与module_exit

    以两个C文件为例: 将本该被分别编译成adc_device.ko和adc_driver.ko的adc_device.c.adc_driver.c编译成一个ko文件! 採用方法: 第一步.改动C文件 1 ...

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

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

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

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

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

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

  9. less文件编译成微信小程序wxss文件

    2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...

随机推荐

  1. windows下基于sublime text3的nodejs环境搭建

    第一步:先安装sublime text3.详细教程可自行百度,这边不具体介绍了. 第二步.安装nodejs插件,有两种方式 第一种方式:直接下载https://github.com/tanepiper ...

  2. TYVJ P1007 排座椅 Label:多想想输出 水

    背景 NOIP2008年普及组第二题 描述    上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只 ...

  3. SecureCrt自动化

    Crt自动化 测试 SecureCrt脚本 JS脚本   引言 软件介绍 脚本介绍 引言 在嵌入式公司中,面对大量的网络设备,不论开发同事进行设备开发.测试同事进行大量测试工作还是运维人员进行大量设备 ...

  4. 使用freemarker生成word,步骤详解并奉上源代码

    1.   步骤 1.    用word编辑好模板 1. 普通字符串替换为 ${string} 2. 表格循环用标签 <#list userList as user> 姓名:${user.u ...

  5. 象写程序一样写博客:搭建基于github的博客

    象写程序一样写博客:搭建基于github的博客   前言 github 真是无所不能.其 Pages 功能 支持上传 html,并且在页面中显示.于是有好事者做了一个基于 github 的博客管理工具 ...

  6. 如何使用数据库保存session的方法简介

    使用数据库保存session的方法 php的session默认是以文件方式保存在服务器端,并且在客户端使用cookie保存变量,这就会出现一个问题,当一个用户由于某种安全原因关闭了浏览器的cookie ...

  7. Powershell获取WMI设备清单

    支持所有PS版本. WMI服务能够报告详细的硬件信息.通常,每个硬件都来自它们自己的WMI代理类.但是要找出这些硬件类的名字是不容易. 所有硬件类都在同一个WMI根下面,你可以在根类查询所有的硬件: ...

  8. Java量与变量的区别

    常量:其值不变即为常量. 语法: 数据类型 常量名 = 值; double PI = 3.14; 备注: 一般默认常量名大写. 变量与常量之间关系(量间关系) 先来一个简单的实例,好了解 Java 里 ...

  9. 11. 求奇数分之一序列前N项和

    求奇数分之一序列前N项和 #include <stdio.h> int main() { int denominator, i, n; double item, sum; while (s ...

  10. Redis学习手册(Key操作命令)

    一.概述: 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命 令都具有一个共同点,即所有的操作都是针对与 ...