一.概述&安装 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作. 好了,废话不多说了.既然要了解Gulp,就得先安装它. Gulp是基于node来实现的,so你得先有个node环境(见“初探nodeJS”). node环境有了后,安装Gulp就很easy咯. 命令行中,输入npm install gulp –g就OK…

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp是基于through…

ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都是基于node环境,如果不知道node,建议先看看”初探nodeJS”. (2).说到Gulp,如果你还不是很清楚的话,建议先了解Gulp(”细说Gulp”). OK,从无到有.接下来,我们就一步步搭建这个‘转换神器’吧. Get started 因为是Gulp + Bable的形式,所以得先安装g…

安装和使用就不详细说了.前面有. gulpfile.js 的配置 var gulp = require('gulp'), rename = require('gulp-rename'), // 记得先下载插件哦 uglify = require("gulp-uglify"); gulp.task('rename', function () { gulp.src('src/js/main.js') .pipe(uglify()) //压缩 .pipe(rename('main.min.j…

如标题所述,这篇博文是说scss以及gulp发布方式: 如果你没用过scss和gulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅: 说scss之前,先来说说sass,sass是一种CSS的开发工具(前面的scss和less都是),提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护:我们都知道css不是一种编程语言,它只能定义描述样式,无法像编程语言一样继承和编译,而sass给我们提供这样一种便利,或者说它就是这样设计诞生的,sass中可以写入变…

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大…

开始接触LESS.组件化编程后,慢慢意识到需要一个提高工作效率的构建工具,就此接触到了Gulp. Gulp的好处在这里就不细说啦,只有四个API接口学起来简直爽歪歪,减少了大量的I/O操作,用起来很畅快.另外丰富的插件能99.9%满足你的需求,剩下的0.1%还可以自己写啊吼吼吼吼.总结一下自己觉得好用的常用的插件: gulp-plumber : 如果说Gulp是一条水管,那gulp-plumber就是水管工.无论在文件处理过程中的哪一步出现问题,都会反映在终端上. gulp-less/sass:…

在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的.有意义的工作,比如设计业务逻辑,编写代码等等. 对很多前端开发人员而言,Grunt 无疑是这方面的首选.基本上,如果你会用 JavaScript ,那么在一个名为 Gruntfile.js (或者 Gruntfile)的文件中用 Javascript 语言定义自动化任务是非常简单的过程,同时大量的…

一.整体结构分析 整体结构 通过在nodejs环境对源码的打印,我们最终得到的gulp实例行如下图.那么我们gulp实例上的属性和方法是如何生成的呢? Gulp { domain: null, _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined, _registry: DefaultRegistry { _tasks: {} }, _settle: false, watch: [Funct…

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常…

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gul…

背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档一样.一个html页面,夹杂着css,javascript是再常见不过的事了. 随着前端的不断发展,特别是单页应用的兴起,这种所见即所得的IDE工具,就渐渐地退出了前端的主流.一个应用,通常只有一个静态页面(index.html),甚至这个页面的body只有一个或少数几个div组成.这时有大量的cs…

0x00 前言 在匹夫的上一篇文章<匹夫细说C#:不是“栈类型”的值类型,从生命周期聊存储位置>的最后,匹夫以总结和后记的方式涉及到一部分迭代器的知识.但是觉得还是不够过瘾,很多需要说清楚的内容还是含糊不清,所以这周就专门写一下c#中的迭代器吧. 0x01 你好,迭代器 首先思考一下,在什么情景下我们需要使用到迭代器? 假设我们有一个数据容器(可能是Array,List,Tree等等),对我们这些使用者来说,我们显然希望这个数据容器能提供一种无需了解它的内部实现就可以获取其元素的方法,无论它是…

在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机.该协议包含一个握手和一个基本消息分帧.分层通过TCP.简单点说,通过握手应答之后,建立安全的信息管道,这种方式明显优于前文所说的基于 XMLHttpRequest 的 iframe 数据流和长轮询.该协议包括两个方…

相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三) 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四) 一.准备工作 1.什么是 npm? npm 是 nodejs 的包管理工具,主要功能就是管理.更新.搜索.发布node的包.Gulp 就是通过 NPM 安装的.关于 NP…

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html 相关连接导航 在windows下安装gulp —— 基于…

本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查…

1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命令打包开发chunk,并支持热替换 可以通过命令打包可发布的chunk 支持路由 路由中的代码实现按需加载 用CommonJs的风格组织代码 代码结构尽量清晰易懂 尽我所能先做出一个满足以上特点的架子吧,最近看完ES6,准备再去看看flux和reduce,看过之后再来思考下前端数据如何管理比较科学规…

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

原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不同,gulp的流式构建使得gulpfile.js文件写起来并不是像Gruntfile.js一样完成一个个插件的配置那样多.对于这点我的理解还不是很深刻,只能暂时这样做一个比较吧,以后的学习接触多了应该就会深刻的体会到. 2.似乎gulp的上手比grunt更简单一些,或者说一个是轻量级一个是重量级的吧…

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是适用的,可以减少 HTTP 请求数量,提高性能.不过在其他一些情况下,打包的单个文件可能过大,使得页面的初始加载时间过长.这主要是因为单个文件中包含了全部的模块,其中的某些模块使用得很少,或是在页面初始加载的时候不需要,可以在需要的时候再加载.这个时候可以用 Browserify 的插件来创建不同的…

1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有更新到 每次gulp运行完后都会生成新的文件,开发环境是做了清除dist目录处理,但对于一般公司服务器而言,发布到生产环境上,不可能每次发布都对dist做清空处理,文件只会越积越多 先睹为快,猛戳链接下载Demo :http://pan.baidu.com/s/1skDm2Up 2.修改require.js…

本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.exam…

前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前端构建大法 Gulp 系列 (四):gulp实战 前面讲了很多理论,那么这一节我们将讲一些实战的例子 安装Node.js 先在命令行下输入 node -v 检查一下是否装了node, 如果没有请参考 https://github.com/joyent/node/wiki/Installing-Nod…

系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前端构建大法 Gulp 系列 (四):gulp实战 gulp 本身能做的事情非常少,主要是通过插件来提供各种功能,gulp本身只提供了4个非常简洁的API, 掌握这4个API你就基本掌握了gulp的全部. 一.gulp.task gulp 是基于task的方式来运行 定义 gulp.task…

系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前端构建大法 Gulp 系列 (四):gulp实战 在上一篇 前端构建大法 Gulp 系列 (一):为什么需要前端构建 中,我们说了为什么需要前端构建,简单一句话,就是让我们的工作更有效率. 相信熟悉前端的人对Grunt一定不陌生,实际上我自己之前的很多项目也是在用Grunt, Grunt的…

系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前端构建大法 Gulp 系列 (四):gulp实战 我们都知道使用IDE编写后端程序时,我们都需要Build, 对.NET来说,我们一般需要使用Visual Studio来确保我们的项目编译通过,而且项目编译通过是对所有程序员的基本要求. 但是,由于很多后端程序员对前端的很多东西不了解,导致…

也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没死,gulp也不是多新颖的东西). 看标题很明显知道相比Grunt,我会更为推崇gulp,不是说Grunt不好,而是gulp效率更高.健壮性更好,配置也更为简单,自然也值得我们为它任性一回. 先谈谈上述提到的gulp的优越性: 一. 性能更高 相对Grunt频繁的IO操作读写,gulp是将项目任务流…

一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs for People First, Computers Second)".虽然这是针对代码可读性来谈及的,但这间接昭示了开发效率之重要不是?此次以 Vue , Es6, Jade, Scss , Webpack, Gulp等一套强大组合来改善团队前端工作流,首因即出于这个理念. 微注:如此处排版不尽…

前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率.相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作.此处仅记录初步折腾中所遇点滴以及待解决的点. 文章首链 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程,使用还是非常简易的.初步入门资料可参考这里.所以战略上一定要藐…