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. 不容易系列之二[HDU2042]

    不容易系列之二 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. 命令模式坚决svn树冲突(local unversioned, incoming add upon update)

    当工作目录修改删除过时更新使用svn更新就容易发生树冲突“Tree Confilict”.会出现类似提示. local unversioned, incoming add upon update 如果 ...

  3. POJ 3281 (最大流+匹配+拆点)

    题目链接:http://poj.org/problem?id=3281 题目大意:有一些牛,一堆食物,一堆饮料.一头牛要吃一份食物喝一份饮料才算满足,而且牛对某些食物和饮料才有好感,问最多有多少头牛是 ...

  4. html页面元素加载顺序

    一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...

  5. Nhibernate Case SUM

    SELECT ID END) as nbRowWithValueOf2, END) as nbRowWithValueOf3 FROM Foo GROUP BY ID queryover = quer ...

  6. 网页制作常见的问题(怎样兼容IE6/IE7/火狐浏览器)

    1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: <style type="t ...

  7. C++ and Java template class and function 模板类和模板函数

    在C++和Java的泛式编程中,模板template的使用是必不可少的,但是Java中没有template关键字,所以两者的写法还是有些许区别的,请参见如下代码: Java的模板 // Java pu ...

  8. QInputDialog 使用方法

    在Qt中,如果想快速生成一个对话框,可以和用户进行简单的交互,而不需要写一个新的类的时候,就要用到QInputDialog类,这个类就是专门用来建立简单对话框的,其主要能建下列几种对话框:

  9. AsyncTask的基本使用

    // String --> doInBackground(Params... params)的参数 // File --> publishProgress(Progress... valu ...

  10. journalctl --help

    journalctl [OPTIONS...] [MATCHES...] Query the journal. Flags:     --system              Show the sy ...