用好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的更多相关文章

  1. 续Gulp使用入门编译Sass

    使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...

  2. gulp配置(编译压缩转码自动刷新注释全)

    参考自:http://www.sheyilin.com/2016/02/gulp_introduce/ 在原先基础上增加了less编译 es6转码资源地图等,修改了一部分的热刷新. gulpfile. ...

  3. 利用gulp搭建less编译环境

       什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, ...

  4. 项目使用gulp的配置编译sass笔记

    Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版 ...

  5. 使用gulp搭建less编译环境

    什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Fi ...

  6. 运用Gulp压缩文件编译文件。包括css js html image

    安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引 ...

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

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

  8. 【gulp】gulp + browsersync 构建前端项目自动化工作流

    什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构 ...

  9. 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件

    安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...

随机推荐

  1. Pregel的计算过程

  2. python 2 学习历程(一)

    在用户输入字符串的时候,有时会带有一些其他的字符,例如常见的空格 除非在网页或者某个位置声明了空格也算字符,或者一些账号等安全程度较高的环节,多了一个空格很少有人会注意到,并且愿意即时改正它们,那么这 ...

  3. [JZOJ6355] 【NOIP2019模拟】普 24/100

    题目 题目大意 给你一个序列,对于所有\(k\in [1,n]\),求长度为\(k\)的子序列的最大权值,权值为\(a_1-a_2+a_3-...\pm a_k\) 思考历程 这题显然可以背包对吧-- ...

  4. 单源最短路径问题1 (Bellman-Ford算法)

    /*单源最短路径问题1 (Bellman-Ford算法)样例: 5 7 0 1 3 0 3 7 1 2 4 1 3 2 2 3 5 2 4 6 3 4 4 输出: [0, 3, 7, 5, 9] */ ...

  5. vim 详解

    Vim是一个功能强大的全屏幕文本编辑器,是Linux/UNIX上最常用的文本编辑器. 它的作用是建立.编辑.显示文本文件. Vim的几种模式 正常模式: 可以使用快捷键命令,或按:输入命令行. 插入模 ...

  6. Delphi流

      一.流的概念 流简单说是建立在面向对象基础上的一种抽象的处理数据的工具,它定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员只需掌握对流进行操作,而不用关心流的另一头数据的真正流向.其实 ...

  7. NX二次开发-UFUN获取当前显示部件的TAG,UF_PART_ask_display_part

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_part.h> UF_initialize ...

  8. python从入门到大神---4、python3文件操作最最最最简单实例

    python从入门到大神---4.python3文件操作最最最最简单实例 一.总结 一句话总结: python文件操作真的很简单,直接在代码中调用文件操作的函数比如open().read(),无需引包 ...

  9. 检测API函数的InlineHook

    BOOL GetProcHookStatus(LPCSTR lpModuleName, LPCSTR lpProcName) { HMODULE hModule = GetModuleHandleA( ...

  10. Centos6.5安装ruby2.2.3

    一.安装库 Yum install –y gcc* openssl* wget 二.安装ruby wget https://cache.ruby-lang.org/pub/ruby/2.2/ruby- ...