玩转gulp之gulp编译less
用好gulp grunt webpack让前端编程走向自动化,是作为一个前端开发必须学会的技能,不然逼格怎么提升的上去呢。。。
然后教大家如何用gulp装逼。一点点的学,都是相通的嘛
1. 安装node
2. 安装npm
3. 安装cnpm
4. 安装全局gulp
5. cnpm init建立package.json
6. 添加依赖dependence gulp和gulp-less
7. cnpm install
以上步骤就不多做解释了,这些只不过是编写nodeJs运行文件编译的一个前提而已,然后编写一个gulpfile.js 通过nodeJs来后台进行less编译
first step : 导入模块
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');
second step : 运用模块建立任务
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
gulp模块的task方法会启动一个任务,如果第一个参数是default就会设置默认执行任务,如果其他的例如我们写了一个testLess就会定义任务
third step : 执行默认的任务
gulp.task('default',['testLess']); //定义默认任务
forth step : 编译

任务写出来了,我们把刚刚制定的任务执行以下。前提是得有那个文件哦,不然看不到效果。
这个方法可以通过npm去执行,慢慢学下去,就可以自己做一个脚手架啦
玩转gulp之gulp编译less的更多相关文章
- 续Gulp使用入门编译Sass
使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...
- gulp配置(编译压缩转码自动刷新注释全)
参考自:http://www.sheyilin.com/2016/02/gulp_introduce/ 在原先基础上增加了less编译 es6转码资源地图等,修改了一部分的热刷新. gulpfile. ...
- 利用gulp搭建less编译环境
什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, ...
- 项目使用gulp的配置编译sass笔记
Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版 ...
- 使用gulp搭建less编译环境
什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Fi ...
- 运用Gulp压缩文件编译文件。包括css js html image
安装node.js npm 以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 【gulp】gulp + browsersync 构建前端项目自动化工作流
什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构 ...
- 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件
安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...
随机推荐
- ubuntu14.04标题栏显示上下网速
首先当然是用 wget 下载 indicator-sysmonitor,终端执行命令: wget -c https://launchpad.net/indicator-sysmonitor/trunk ...
- React简单入门
各位圆友,新年好!!! 使用 React 的网页源码时,首先,最后一个 <script> 标签的 type 属性为 text/babel .这是因为 React 独有的 JSX 语法,跟 ...
- lsm和lkm模块
使用LSM Hook框架进行内核安全审计.元数据捕获,安全人员只需要按照既定的调用规范编写LKM模块,并加载进Linux内核,而不需要对system call lookup表进行任何修改 https: ...
- vue中axios的封装以及简单使用
一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...
- lombok @Builder实现原理
public class Person { private Person(Builder builder) { name = builder.name; age = builder.age; } pr ...
- leetcode-159周赛-5233-规划兼职工作*
方法: class Solution: def jobScheduling(self, startTime: List[int], endTime: List[int], profit: List[i ...
- leetcood学习笔记-66-加一
题目描述: 第一次提交: class Solution: def plusOne(self, digits): digits[-1]=digits[-1]+1 for i in range(len(d ...
- Linux service,挂载,定时任务等常用服务
一.防火墙 防火墙根据配置文件/etc/sysconfig/iptables 来控制本机的“出.入”网络访问行为 其对行为的配置策略有四个策 1. 基础必备技能 查看防火墙状态 s ...
- thinkphp 模型调试
调试执行的SQL语句 在模型操作中 ,为了更好的查明错误,经常需要查看下最近使用的SQL语句,我们可以用getLastsql方法来输出上次执行的sql语句.例如: $User = M("Us ...
- Java中JNI的使用详解第四篇:C/C++中创建Java对象和String字符串对象及对字符串的操作方法
首先来看一下C/C++中怎么创建Java对象:在JNIEnv中有两种方法是用来创建Java对象的: 第一种方法: jobject NewObject(jclass clazz , jmethodI ...