Gulp--Less
摘要:
前面分享了一些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的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- gulp初学
原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js 配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...
- gulp批量打包文件并提取公共文件
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
随机推荐
- u-boot2011.09 u-boot.img 的流程跟踪
一.主要是start.S 里面的 board_init_f 以及 board_init_r 函数分析,MLO与 u-boot.omg 的区别就在这里 二. MLO 加载完毕,他会重新回到 start. ...
- 两种常用的jquery事件加载的方法 的区别
两种常用的jquery事件加载的方法 $(function(){}); window.onload=function(){} 第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...
- Spring Cloud Config 配置高可用集群
详细参考:<Sprin Cloud 与 Docker 微服务架构实战>p163-9.10节 spring cloud config 与 eureka 配合使用 我就不写了,请参见本书章节.
- 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 ...
- Linux SWAP 交换分区大小与内存的关系
LinuxSWAP交换分区大小与内存的关系SWAP(交换分区)[Windows虚拟内存]我们机房中一台Linux服务器运行缓慢,系统服务出现间歇性停止响应,让我过去处理一下这一问题,登录到服务器之后, ...
- 【转载】一文总结学习 Python 的 14 张思维导图
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...
- 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 ...
- 模式识别之bpnn---神经网络训练
http://blog.csdn.net/linj_m/article/details/40679085
- 使用Camera功能 AREA的理解
转至 http://blog.csdn.net/think_soft/article/details/7998478 使用Camera功能 大多数的Camera功能都是使用Camera.Paramet ...
- Python WSGI开发随笔
本文记录学习WSGI时的一些知识点,值得后续学习中注意. wsgi应用接口只要是一个可调用的对象就行,这个可调用的对象需要: 1. 接受两个位置参数: a. 包含CGI形式变量的字典: b. 应用调用 ...