Gulp:新一代前端构建利器
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插件列表
Gulp:新一代前端构建利器的更多相关文章
- 仿async/await(一)and Gulp:新一代前端构建利器
NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...
- 前端构建利器Grunt—Bower
runt + Bower—前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web ...
- 使用Gulp实现前端构建自动化
使用Gulp实现前端构建自动化 安装 一.安装NodeJs Gulp的安装依赖于NodeJs的npm安装管理器 安装包下载地址 关于npm命令: 1. npm install <name> ...
- Grunt + Bower—前端构建利器(转)
目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...
- Grunt + Bower—前端构建利器
目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行 ...
- 前端构建大法 Gulp 系列 (四):gulp实战
前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...
- 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 前端构建大法 Gulp 系列 (二):为什么选择gulp
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- 前端构建大法 Gulp 系列 (一):为什么需要前端构建
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
随机推荐
- 一个jsonp的简单实例
<script type="text/javascript"> //添加<script>标签的方法 function addScriptTag(src){ ...
- php读取大文件的方法
1.使用file 函数直接读取 $starttime = microtime_float(); ini_set('memory_limit','-1'); $file = "testfile ...
- [推荐]DDOS攻击与防范知识介绍
[推荐]DDOS攻击与防范知识介绍 DDOS攻防体系建设v0.2(淘宝-林晓曦) http://wenku.baidu.com/view/39549a11a8114431b90dd866.ht ...
- JavaScript 2016年的概况
国外的网站stateofjs.com根据超过九千位开发人员的问卷调查,发布了2016年JavaScript的年度概况报名. 注:本文翻译的部分可能存在不准确的情况,请以原文为准. 调查结果的报告目录结 ...
- C#:WebBrowser中伪造referer,为何对流量统计器无效?
使用webbrowser伪造referer的方法:webBrowser1.Navigate(url, "_self", null, "Referer:http://www ...
- LeetCode:Combination Sum I II
Combination Sum Given a set of candidate numbers (C) and a target number (T), find all unique combin ...
- YChaos生成混沌图像
YChaos是一款通过数学公式生成混沌图像的软件,展示混沌之美,数学之美.软件中定义一套简易的脚本语言,用于描述数学表达式.使用时需要先要将数学表达式写成该脚本的形式,解析脚本代码以生成相应的图形与图 ...
- java观察者模式的实现
在看博客里,有个订阅功能,当你订阅后,当博主发布新的博客,你都能收到消息.这是如何实现的?是不是后台有个线程在不停的轮询?如果是这样的话,显然太耗资源,如果当博客在发布时,找到所有的订阅者,然后循环的 ...
- [转] Autofac创建实例的方法总结
1.InstancePerDependency 对每一个依赖或每一次调用创建一个新的唯一的实例.这也是默认的创建实例的方式. 官方文档解释:Configure the component so tha ...
- 【LeetCode】258. Add Digits (2 solutions)
Add Digits Given a non-negative integer num, repeatedly add all its digits until the result has only ...