gulp入门学习
一、gulp简介
gulp是一个自动化构建工具。在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率。
二、安装gulp
在安装gulp之前先要确认已经正确安装了node.js,然后在项目根目录下安装gulp:
$ npm install gulp
三、gulp函数接口介绍
在编写gulp配置文件gulpfile之前,需要先了解常见的函数接口:
1. gulp.src()
gulp的工作过程是这样的,首先通过gulp.src()获取我们想要处理的文件的stream(文件流);然后,通过.pipe方法将stream导入到引用的gulp插件中进行相应的处理;最后通过gulp.dest()方法将处理后的流写入到文件中。
从gulp工作过程中可以看到,gulp.src()主要用来从文件中获取文件流。gulp.dest()函数原型如下:
gulp.src(globs[, options]
globs是文件的匹配路径和匹配形式。下面列举了部分常用的匹配形式:
(1)js/test.js //精确匹配文件
(2)js/*.js //匹配js目录下所有后缀为.js的文件
(3)js/**/*.js //匹配js目录及其子目录下所有后缀为.js的文件
(4)!js/test.js //从匹配结果中排出js目录下的test.js文件
2. gulp.task()
gulp.task()函数用来构建任务。函数原型为:
gulp.task(name[, deps], fn)
name是所构建的任务名称。fn是任务所要执行的函数,gulp具体的工作过程是在fn中进行的。示例:
var webpack = require('gulp-webpack');
var config = require('./webpack.config');
gulp.task('webpack', function() {
return webpack(config)
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
上面的代码是我在项目中使用的部分。该部分是webpack与gulp的联合使用,第一次看到别人用时,感觉发现了新大陆。task参数function中webpack会首先执行同一目录下的webpack.config.js配置文件,对代码进行模块打包;然后,返回打包后的所有文件的文件流;文件流通过pipe进入到uglify插件后进行压缩;最后,文件流通过gulp.dest写入到设置的目录下。
3.gulp.dest()
gulp.dest()是对文件流的输出进行设置。函数原型为:
gulp.dest(path[, options])
path是文件输出路径设置。注意:path只能生成文件的目录,不能生成文件的名称,不能生成文件的名称,不能生成文件的名称,不能生成文件的名称,重要的事说四遍。而最终生成的文件的名称是由gulp.src传入的文件名决定。下面会由示例的。
文件最终生成的路径也需要注意:
(1)如果gulp.src(path)中的path带有通配符,则生成的路径由gulp.dest(path_dest)中的path_dest代替path通配符前面的部分组成。例如:
gulp.src('js/*/test.js')
//假设匹配到的文件为js/source/test.js
.pipe(gulp.dest('dist')); //最终生成的文件为 dist/source/test.js
(2)如果gulp.src(path)中的path没有带通配符,则生成的路径由gulp.dest(path_dest)中的path_dest与gulp.src引入的文件名组成。例如:
gulp.src('js/test.js')
.pipe(gulp.dest('dist')); //最终生成的文件为 dist/test.js
四、常用的gulp插件
1. gulp-uglify插件
引入:
var uglify = require('gulp-uglify');
作用:对js文件流进行压缩。
gulp.task('server_test', function() {
return gulp.src(server/app.js)
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
上面代码中的uglify()会对流过它的js数据流进行压缩,然后有gulp.dest写入到js目录下。
2. gulp-less插件
引入:
var less = require('gulp-less');
作用:对less文件流进行压缩
gulp.task('server_test', function() {
return gulp.src(server/device.less)
.pipe(less())
.pipe(gulp.dest('./dist/less'));
});
上面代码中的less()会对流过它的less数据流进行压缩,然后有gulp.dest写入到less目录下。
3. gulp-minify-css插件
引入:
var minifyCSS = require('gulp-minify-css');
作用:对css文件流进行压缩
gulp.task('server_test', function() {
return gulp.src(server/control.css)
.pipe(minifyCSS())
.pipe(gulp.dest('./dist/css'));
});
上面代码中的minifyCSS()会对流过它的css数据流进行压缩,然后有gulp.dest写入到css目录下。
gulp中有很多插件,具体根据需要来选择。
兄弟姐妹们,看完后顶一下,收藏一下吧,深夜写博客累呀!!!
gulp入门学习的更多相关文章
- gulp入门学习教程(入门学习记录)
前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...
- gulp入门学习实例
好久都没有更新博客了,每天繁忙的工作,下班之后都不想开设备了.前段时间有幸学习了一下gulp这款构建工具,现在和大家分享一下. 为什么使用Gulp Gulp基于Node.js的前端构建工具,通过Gul ...
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- Gulp入门与解惑
Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...
- scss入门学习(一)
sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯 ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记(三)
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
随机推荐
- thinkphp中ajax用户名校验
ajax实在是太神奇了,刚刚接触,不足之处,请大家指正. 采用Ajax方式进行页面无刷新提示,来检测用户名是否存在. 搭建一个thinkphp的环境,在index.html中,ajax代码如下: &l ...
- shell每日发邮件
LOGFILE="$fank/"`date +"%Y%m%d"`"data"#每日文件 from="abc@123.com&quo ...
- CSS 去除浏览器默认 轮廓外框
在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色)~ 然而这些默认的轮廓外框,有时候很影响美观,并不是我们想保留的. 我们应如何消 ...
- 纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
- MVC中的路由
authour: chenboyi updatetime: 2015-05-02 16:10:04 friendly link: 目录 1,思维导图 2,MVC处理机制简图(讲解路由解析) 3,默 ...
- poj 2528Mayor's posters
http://poj.org/problem?id=2528 这个题有个细节,整个区间的长度为10000000,而n最大只有1000,所以我们要进行离散化. #include<cstdio> ...
- Expanding Rods
http://poj.org/problem?id=1 #include<cstdio> #include<cstring> #include<cmath> #in ...
- Subway POJ 2502
题目链接: http://poj.org/problem?id=2502 题目大意: 你刚从一个安静的小镇搬到一个吵闹的大城市,所以你不能再骑自行车去上学了,只能乘坐地铁或者步行去上学.因为你不想迟到 ...
- fastjson将bean转成字符串时首字母变小写问题
一个项目需求要求返回值为JSON格式,且大多数字段是首字母大写,还有些是类似N_TX这样的格式,在输出这样的结果时遇到了问题,由于时间紧,就直接拷贝需要的结果字段建立JavaBean类,本以为最后直接 ...
- Generate Parentheses——LeetCode
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...