1、什么是Gulp

gulp.js 是一种基于流的,代码优于配置的新一代构建工具。

Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建。

2、Gulp特性

  • 使用方便

通过代码优于配置的策略,Gulp可以让简单的任务简单,复杂的任务更可管理。

  • 构建快速

通过流式操作,减少频繁的 IO 操作,更快地构建项目。

  • 插件高质

Gulp 有严格的插件指导策略,确保插件能简单高质的工作。

  • 易于学习

少量的API,掌握Gulp可以毫不费力。构建就像流管道一样,轻松加愉快。

3、Gulp安装

Gulp是基于 Node.js的,故要首先安装 Node.js

 npm install -g gulp
npm install —-save-dev gulp

4、Gulp使用

Gulp的任务都是以插件的形式存在,本次示例以 gulp-jshint 为例,展示Gulp的常规用法。

安装 gulp-jshint

 npm install gulp-jshint --save-dev

创建 gulpfile.js

gulp项目页 有一个 Sample gulpfile。如果不会写的话,直接参考一下就OK了。

 var gulp = require('gulp');
var jshint = require('gulp-jshint'); var paths = {
scripts: 'js/**/*.js',
}; gulp.task('lint', function() {
return gulp.src(paths.scripts)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

然后执行命令行

 gulp lint

即可。

5、Gulp总结

Gulp 相比于 Grunt 有很多优点,比较直观的:就是学习曲线比较平滑。比Grunt速度更快、配置更少。

当然,Gulp还有很多高级的特性,详见官方文档

Gulp插件列表

http://gulpjs.com/

Gulp:新一代前端构建利器的更多相关文章

  1. 仿async/await(一)and Gulp:新一代前端构建利器

    NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...

  2. 前端构建利器Grunt—Bower

    runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...

  3. 使用Gulp实现前端构建自动化

    使用Gulp实现前端构建自动化 安装 一.安装NodeJs Gulp的安装依赖于NodeJs的npm安装管理器 安装包下载地址 关于npm命令: 1. npm install <name> ...

  4. Grunt + Bower—前端构建利器(转)

    目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...

  5. Grunt + Bower—前端构建利器

    目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...

  6. 前端构建大法 Gulp 系列 (四):gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

  7. 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  8. 前端构建大法 Gulp 系列 (二):为什么选择gulp

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  9. 前端构建大法 Gulp 系列 (一):为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

随机推荐

  1. ThinkPHP执行原生sql,实现一些复杂的业务需求

    1)事情起因:写php的同事做了社区消息接口,主要返回几个方面的消息,如我的主贴的点赞.我的层帖的点赞.我的主贴的评论.我的评论的评论, 数据因为关联了5张以上的表,返回的格式不一: 如原来的thin ...

  2. 17数据表&E-R模型&概念数据模型上-选学天轰穿大话数据库视频教程

    大纲:解剖“数据表”,戏说E-R模型,概念数据模型(E-R 到 CDM),使用PowerDesigner创建概念模型,生成逻辑数据模型 土豆超清地址: 腾讯超清地址: 百度云盘下载地址:上传ing,稍 ...

  3. 远哥谈 使用WebSocket开发在线实时看远程服务器log日志的工具

    我们开发软件的,通常会有一个测试环境/开发环境,但是系统开发完成后,还会有一个生产环境,也叫正式环境.正式环境我们一般是不能让开发人员去远程登录和维护的,一般正规的生产环境是专门的负责人员去负责更新, ...

  4. ios面试总结-

    一 C语言方法的知识 1: const  static  voilite 修辞变量各代表什么意思? const  修辞的变量为常量,常量是不容许修改.  static  修辞的变量为静态变量,在内存中 ...

  5. Unity3D去掉全屏时的屏幕黑边

    给全屏后不在乎拉伸变形仍想让画面占满屏幕的朋友,网上搜了一上午,实在是没有相关的资料,只能自己琢磨了. 使用Canvas Scaler在全屏后Unity虽然会为我们自动拉伸UI,但拉伸后仍然保持我们在 ...

  6. IOS开发之不同版本适配问题2(#ifdef __IPHONE_7_0)

    继续说说ios不同版本之间的适配 先说一个东西:在xcode当中有一个东西叫targets,苹果的官方文档是这样说的: A target specifies a product to build an ...

  7. Splunk - 如何在WebFramework之CORS模式下你的网站和splunk web进行交互

    1. 修改配置文件以支持CORS 进入/Applications/Splunk/etc/system/local 修改server.conf 在最后加入如下: [httpServer]crossOri ...

  8. 文件系统管理 之 实例解说 fdisk 使用方法

    一.fdisk 的介绍: fdisk - Partition table manipulator for Linux ,译成中文的意思是磁盘分区表操作工具:本人译的不太好,也没有看中文文档:其实就是分 ...

  9. android 渐变展示启动屏

    启动界面Splash Screen在应用程序是很常用的,往往在启动界面中显示产品Logo.公司Logo或者开发者信息,如果应用程序启动时间比较长,那么启动界面就是一个很好的东西,可以让用户耐心等待这段 ...

  10. Hadoop 生态系统

    1.概述 最近收到一些同学和朋友的邮件,说能不能整理一下 Hadoop 生态圈的相关内容,然后分享一些,我觉得这是一个不错的提议,于是,花了一些业余时间整理了 Hadoop 的生态系统,并将其进行了归 ...