Gulp:基于流的自动化构建工具
前言
先说说为什么会使用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、常用插件
编译Less (gulp-less)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取,只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)
插件搜索:http://gulpjs.com/plugins/
插件安装(用less举例):$ npm install gulp-less(安装更多只需拼接其后)
Gulp:基于流的自动化构建工具的更多相关文章
- 基于流的自动化构建工具------gulp (简单配置)
项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...
- gulp详细教程——前端自动化构建工具
项目构建 一个项目是由多个开发者共同开发一个项目,各负责不同的模块,这就会造成一个完整的项目许多‘代码片段’组成,合并css.javascript,压缩html.css.javascript.imag ...
- 基于 Groovy 的自动化构建工具 Gradle 入门(转)
本人工作之初没有使用自动化构建,后来敏捷了,开始使用 Ant - 完全面向过程的定义步骤,不进行依赖管理.再发展到 Maven,面向对象的方式管理工程,有了依赖的管理,JAR 包统一从中央仓库获得,保 ...
- gulp基于node流的自动化构建工具
GULP 在我才接触gulp的时候 看他就是一个 通过压缩各种文件来提升用户体验的开发工具 那是因为 对他的理解并不深 他真正强大 之处 在于他的 管子 .pipe() 可以 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
随机推荐
- python之7-3对象的信息/方法获取
我们可以用dir()来获取一个类,一个模块,一个字符串的信息/方法 例如: #可以列出Image模块的方法 >>import Image >>dir(Image) #列出字符串 ...
- C语言初学 测定各数据类型的长度
#include<stdio.h> #include<stdlib.h> int main() { int a,b; int i=0; printf("char:%d ...
- 后台获取HTMLTABLE的innerHtml
c#后台动态创建了htmltable,取其innerHtml时,会报错,因为,htmltable控件不支持该属性,要获取其innerHtml使用如下方法 HtmlTable tb=new Htm ...
- odoo10会计期间
从odoo9,会计模块重构之后,去掉了account.fiscalyear 以及 account.period 这两个模型, 但不表示 odoo 从此就没有 "会计年度"和&quo ...
- Android手机SSH Client客户端推荐JuiceSSH
Windows上建立ssh服务器 参见: http://www.cnblogs.com/xred/archive/2012/04/21/2461627.html Android手机SSH Client ...
- S3C2440 驱动程序开发
转载:http://www.cnblogs.com/lishixian/articles/2999923.html
- Activity生命周期的学习以及Logcat的使用
http://android.blog.51cto.com/268543/322518/ Activities是由Activity stack管理的.当一个新的Activity被启动,它就会处于st ...
- cf Ping-Pong (Easy Version)
http://codeforces.com/contest/320/problem/B 这道题看了很长时间没看懂, 就是个dfs: #include <cstdio> #include & ...
- rsyslog的ommsql模块如何连接MYSQL的非标准数据库端口?
搞了我半小个时查找资料..最后,在一个官方文档中找到他... http://www.rsyslog.com/doc/ommysql.html Sample: The following sample ...
- 使用脚本管理IIS
参考资料https://technet.microsoft.com/zh-cn/library/cc779108(WS.10).aspxhttps://technet.microsoft.com/zh ...