前言

先说说为什么会使用gulp。

当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如:

1、代码的压缩合并、图片压缩怎么搞;

2、代码校验,是否规范;

3、Less是什么鬼?咋用呢?

作为一名新世纪富有朝气的九零后大军一员,虽为码农,心却蓬勃啊。对于新技术和新工具必然有着极大的兴趣,gulp在当下已不算太新鲜的技术,此次正逢机会,必然拿来练练手。

我们第四迭代构建工具用的是Grunt,这次第五迭代采用gulp,相对于前者,gulp属于晚辈,易于使用,配置简单,上手快,速度快。

1、什么是Gulp

Gulp.js是一种基于流,代码优于配置的新一代构建工具。 官网给出的解释是:1、自动化; 2、平台移植性; 3、富生态系统;4、简单,详细的解释我们后面讲。

2、Gulp特性

· 易于使用

遵循代码优于配置策略,维护Gulp更像是写代码,Gulp可以让简单的任务简单,复杂的任务更可管理;

· 构建快速

优于Gulp基于Node.js,通过流式操作,减少频繁的IO操作,更快构建项目(Grunt便是频繁IO);

· 插件高质

Gulp 有严格的插件指导策略,确保插件能简单高质的工作。并且你可以使用NPM享用超过2000个插件,甚至可以自己开发并发布;

· 易于学习

构建就像流管道一样,轻松加愉快。少量的API,使用起来so easy;

3、Gulp安装和使用

1、Gulp是基于Node.js的,所以先安装Node.js,这里不做赘述,通过英文官网下载或者中文网下载安装。

2、确保正确安装了Nodejs环境,然后用以下命令全局方式安装Gulp:

$ npm install gulp -g

3、如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上-save-dev:

$ npm install --save-dev gulp

4、在项目根目录创建gulpfile.js文件:

var gulp = require('gulp');

gulp.task('default', function() {

    console.log('hello world');

});

5、运行Gulp:

$ gulp

默认任务(名为'default')将被执行,控制台输出 hello world

如果需要运行指定任务,使用 gulp taskname命令。

4、Gulp API

使用gulp仅需知道4个API即可:gulp.task()gulp.src()gulp.dest()gulp.watch(),所以很容易就能掌握,下面针对这四种做一个简单介绍:

gulp.src(globs[, options])

gulp.src() 方法正是用来获取流的,但要注意这个流里的内容不是原始的文件流,而是一个虚拟文件对象流,这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息,本文暂不对文件流进行展开,你只需简单的理解可以用这个方法来读取你需要操作的文件就行了,globs 参数是文件匹配模式(类似正则表达式),用来匹配文件路径(包括文件名),当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时,该参数可以为一个数组。 options 为可选参数。通常情况下我们不需要用到,暂不考虑。

gulp.dest(path[,options])

gulp.dest() 方法是用来写文件的,path 为写入文件的路径,options 为一个可选的参数对象,通常我们不需要用到,暂不考虑。

gulp.task(name[, deps], fn)

gulp.task 方法用来定义任务, name 为任务名, deps 是当前定义的任务需要依赖的其他任务, 为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。 如果没有依赖,则可省略这个参数, fn 为任务函数,我们把任务要执行的代码都写在里面。该参数也是可选的。

gulp.watch(glob[, opts], tasks)

gulp.watch() 用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。 glob 为要监视的文件匹配模式,规则和用法与 gulp.src() 方法中的glob相同。opts 为一个可选的配置对象,通常不需要用到,暂不考虑。 tasks 为文件变化后要执行的任务,为一个数组。

5、常用插件

  1. 编译Less (gulp-less)

  2. Autoprefixer (gulp-autoprefixer)

  3. 缩小化(minify)CSS (gulp-minify-css)

  4. JSHint (gulp-jshint)

  5. 拼接 (gulp-concat)

  6. 丑化(Uglify) (gulp-uglify)

  7. 图片压缩 (gulp-imagemin)

  8. 即时重整(LiveReload) (gulp-livereload)

  9. 清理档案 (gulp-clean)

  10. 图片快取,只有更改过得图片会进行压缩 (gulp-cache)

  11. 更动通知 (gulp-notify)

插件搜索:http://gulpjs.com/plugins/

插件安装(用less举例):$ npm install gulp-less(安装更多只需拼接其后)

Gulp:基于流的自动化构建工具的更多相关文章

  1. 基于流的自动化构建工具------gulp (简单配置)

    项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...

  2. gulp详细教程——前端自动化构建工具

    项目构建 一个项目是由多个开发者共同开发一个项目,各负责不同的模块,这就会造成一个完整的项目许多‘代码片段’组成,合并css.javascript,压缩html.css.javascript.imag ...

  3. 基于 Groovy 的自动化构建工具 Gradle 入门(转)

    本人工作之初没有使用自动化构建,后来敏捷了,开始使用 Ant - 完全面向过程的定义步骤,不进行依赖管理.再发展到 Maven,面向对象的方式管理工程,有了依赖的管理,JAR 包统一从中央仓库获得,保 ...

  4. gulp基于node流的自动化构建工具

    GULP 在我才接触gulp的时候 看他就是一个 通过压缩各种文件来提升用户体验的开发工具   那是因为  对他的理解并不深    他真正强大 之处 在于他的     管子  .pipe()  可以 ...

  5. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  6. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  7. 前端自动化构建工具--Gulp&&Webpack

    前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...

  8. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  9. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

随机推荐

  1. 转载:JAVA中使用JSON进行数据传递

    转载网址:http://www.cnblogs.com/undead/archive/2012/07/18/2594900.html 最近在做一个基于JAVA Servlet的WEB应用以及对应的An ...

  2. 我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面

    一.前言 “尼玛哥,上周你教我改了下OA系统UI,黄总看了很满意呀.”    “不错不错,看来小美进步很大,可以提前结束试用期,到时候加工资别忘了请我吃饭呀!”    “尼玛哥,你有女朋友了吗?” “ ...

  3. 性能测试 - some

    1.日常业务中测试过的最大并发数,其QPS为多少? 答: 从服务端开发处得知线上某台机器单接口访问量为63万 因该接口为视频类访问接口,大多数接口集中于晚间时段.可计算QPS = 63万/8/3600 ...

  4. java实现双向链表

    PS:双向链表(每个节点含有指向前一个节点的前驱与后一个节点的后继) public class DoublyLinkedList { static class Node { private Objec ...

  5. Altium Designer 覆铜时过孔连接形式的设置——只将过孔连接设置为Direct Connect

    Altium Designer 在PCB覆铜时,所有的过孔和焊盘都是十字连接即Relief Connect连接的,没有像PROTEL 99SE一样只有接地的焊盘才是十字连接而过孔是直接连接的. 如下图 ...

  6. 【Xamarin 开发 IOS --IOS 页面导航概念Segue】

    Storyboard里面的几种Segue区别及视图的切换:push,modal,popover,replace和custom 一.视图切换类型介绍在storyboard中,segue有几种不同的类型, ...

  7. Cmake 脚本对预处理器的宏定义

    我们有些时候会在#if   #ifndef   等预编译命令里面看到_WIN32等定义的宏.但是有些宏定义,你即使通过Visual Studio右键的go to definitions 和go to ...

  8. AspNetPager实现真分页+多种样式

    真假分页 分页是Web应用程序中最常用到的功能之一.当从数据库中获取的记录远远超过界面承载能力的时候,使用分页可以使我们的界面更加美观,更加的用户友好.分页包括两种类型:真分页和假分页. 其中假分页就 ...

  9. linux网络配置相关文件

    网络接口(interface)是网络硬件设备在操作系统中的表示方法,比如网卡在Linux操作系统中用ethX,是由0开始的正整数,比如eth0.eth1...... ethX.而普通猫和ADSL的接口 ...

  10. 线性时间构造普吕弗(Prüfer)序列

    tree -> sequence 首先预处理数组 deg[N], deg[i]表示编号为i的节点的度数,我们每次要删除的节点肯定是 满足deg[i]=1 的编号最小节点, 首先找到所有叶子并选出 ...