摘要:

  前面分享了一些less的是用方法,包括在grunt中,今天在分享下使用gulp来编译less文件。首先需要安装gulp,如何安装请看文章。

安装插件:

  gulp编译less使用了gulp-less模块,所以package.json如下:

{
"name": "gulp-less",
"version": "1.0.0",
"private": true,
"description": "gulp-less",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"gulp": "~3.5.6",
"gulp-less": "1.3.6",
"gulp-minify-css": "~0.3.0",
"gulp-concat": "~2.4.0",
"gulp-rename": "~1.2.0"
},
"keywords": ["gulp","gulp-less","less"],
"author": "",
"license": "ISC"
}

安装完之后新建gulpfile.js,文件结构:

gulpfile.js

public

​|-->​less

gulpfile.js:

var gulp = require('gulp'),
less = require('gulp-less'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
minifycss = require('gulp-minify-css'); gulp.task('build-less', function(){
gulp.src('./public/less/*.less')
.pipe(less({ compress: true }))
.on('error', function(e){console.log(e);} )
.pipe(gulp.dest('./public/css/')); }); // 合并、压缩、重命名css
gulp.task('min-styles',['build-less'], function() {
gulp.src(['./public/css/*.css'])
.pipe(concat('all.css')) // 合并文件为all.css
.pipe(gulp.dest('./public/css/')) // 输出all.css文件
.pipe(rename({ suffix: '.min' })) // 重命名all.css为 all.min.css
.pipe(minifycss()) // 压缩css文件
.pipe(gulp.dest('./public/css/')); // 输出all.min.css
}); gulp.task('develop', function() {
gulp.watch('./public/less/*.less', ['build-less', 'min-styles']);
});

在当前目录,通过命令窗执行

gulp build-less:你会在public/css/目录下发现less目录下的less文件被编译成对应的css文件。

gulp min-styles:会在css目录下输出all.css和all.min.css文件。

gulp develop:会监听所有less文件,当有less文件改变时,会执行build-less和min-styles

Gulp--Less的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

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

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

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  7. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. u-boot2011.09 u-boot.img 的流程跟踪

    一.主要是start.S 里面的 board_init_f 以及 board_init_r 函数分析,MLO与 u-boot.omg 的区别就在这里 二. MLO 加载完毕,他会重新回到 start. ...

  2. 两种常用的jquery事件加载的方法 的区别

    两种常用的jquery事件加载的方法   $(function(){});  window.onload=function(){}  第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...

  3. Spring Cloud Config 配置高可用集群

    详细参考:<Sprin Cloud 与 Docker 微服务架构实战>p163-9.10节 spring cloud config 与 eureka 配合使用 我就不写了,请参见本书章节.

  4. DFS-深度优先遍历

    #include <iostream> /* 5 4 0 0 1 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 1 0 0 4 1 Total: 9 7 5 Min: 5 ...

  5. Linux SWAP 交换分区大小与内存的关系

    LinuxSWAP交换分区大小与内存的关系SWAP(交换分区)[Windows虚拟内存]我们机房中一台Linux服务器运行缓慢,系统服务出现间歇性停止响应,让我过去处理一下这一问题,登录到服务器之后, ...

  6. 【转载】一文总结学习 Python 的 14 张思维导图

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...

  7. e614. Setting the Initial Focused Component in a Window

    There is no straightforward way to set the initial focused component in a window. The typical method ...

  8. 模式识别之bpnn---神经网络训练

    http://blog.csdn.net/linj_m/article/details/40679085

  9. 使用Camera功能 AREA的理解

    转至 http://blog.csdn.net/think_soft/article/details/7998478 使用Camera功能 大多数的Camera功能都是使用Camera.Paramet ...

  10. Python WSGI开发随笔

    本文记录学习WSGI时的一些知识点,值得后续学习中注意. wsgi应用接口只要是一个可调用的对象就行,这个可调用的对象需要: 1. 接受两个位置参数: a. 包含CGI形式变量的字典: b. 应用调用 ...