1.创建:gulpfile.js

var gulp = require('gulp'),
less = require('gulp-less'); gulp.task('default', function () {
gulp.src('less/index.less')
.pipe(less())
.pipe(gulp.dest('dist'));
});

2.创建package.json

npm init

3.安装gulp到项目

npm install --save-dev gulp

4.安装插件到项目:

npm install gulp-less --save-dev

5.准备的less/index.css

@color:#ff0000;
body{color:@color;}

6.目录下运行:

gulp

效果输出:

dist/app.css

body {
color: #ff0000;
}

Gulp插件less的使用的更多相关文章

  1. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  2. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  3. gulp插件(gulp-jmbuild),用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  4. gulp插件gulp-usemin简单使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

  5. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

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

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

  7. 如何编写一个gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...

  8. Gulp 插件及其使用

    前端现在有很多的自动打包工具,各有优缺点,而gulp作为其中的一员,也有着很受人们的青睐,简单粗暴,然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的,本文简单介绍一些常用的gu ...

  9. gulp插件构建项目 压缩js、css、image、zip、web服务、跨域等插件

    推荐一个很好文: https://github.com/lin-xin/blog/issues/2 匹配符 *.**.!.{} gulp.src('./js/*.js') // * 匹配js文件夹下所 ...

  10. Gulp插件笔记

    初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...

随机推荐

  1. 理解 pkg-config 工具(linux编译辅助工具)

    转:http://www.jb51.net/LINUXjishu/86519.html 你在 Unix 或 Linux 下开发过软件吗?写完一个程序,编译运行完全正常,在你本机上工作得好好的,你放到源 ...

  2. Python中的json操作

    Python中的json操作 标签(空格分隔): python 编码 json 字符串前缀问题 字符串前缀可以有r,u r:表示原始(raw)字符串,比如'\n'不会被转义.常用于正则. u:表示un ...

  3. markdown 测试代码

    这是 H1 这是 H2 这是 H3 这是 H4 这是 H5 这是 H6 A First Level Header A Second Level Header Now is the time for a ...

  4. 【LOJ】#2129. 「NOI2015」程序自动分析

    题解 开始是想两个并查集的 和A相等,和A不相等 如果AB相等就连 A 相等,B相等 B不相等 A不相等 如果AB不相等就连 A不相等,B相等 B相等,A不相等 但是显然不对,因为和A不相等的不一定和 ...

  5. eclipse 创建 maven 项目时如何修改 web 的版本和 jdk 的版本

    eclipse 创建 maven 项目时如何修改 web 的版本和 jdk 的版本 在使用 eclipse 创建 maven 项目的时候,默认的 web.xml 的版本时 2.3,默认 jre 的版本 ...

  6. jquery放大镜非常漂亮噢

    这个放大镜的代码挺简单滴效果也不错. <script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // ...

  7. redis实现分布式锁工具类 灰常好用

    public interface RedisDistributionLock { /** * 加锁成功,返回加锁时间 * @param lockKey * @param threadName * @r ...

  8. Web应用程序信息收集工具wig

    Web应用程序信息收集工具wig   很多网站都使用成熟的Web应用程序构建,如CMS.分析网站所使用的Web应用程序,可以快速发现网站可能存在的漏洞.Kali Linux新增加了一款Web应用程序信 ...

  9. Linux内核镜像格式

    <Linux内核镜像格式>   Linux内核有多种格式的镜像,包括vmlinux.Image.zImage.bzImage.uImage.xipImage.bootpImage等. ➤k ...

  10. 韩梦飞沙-屏幕录像专家 win10 含注册机

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 韩梦飞沙-屏幕录像专家 win10 含注册机 百度云盘下载地址:https://pan. ...